simpo-component-library 3.7.5 → 3.7.7

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, interval, firstValueFrom, startWith, distinctUntilChanged, switchMap, catchError, of } from 'rxjs';
+import { fromEvent, debounceTime, map, forkJoin, interval, firstValueFrom, startWith, distinctUntilChanged, switchMap, catchError, of, filter } from 'rxjs';
 import * as i9 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormArray, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
@@ -2451,6 +2451,7 @@ class BaseCollection {
 class Category extends BaseCollection {
     constructor(json) {
         super(json);
+        this.slugName = json?.["slugName"];
         this.categoryId = json?.["categoryId"];
         this.categoryName = json?.["categoryName"];
         this.featuredCategory = json?.["featuredCategory"];
@@ -2467,6 +2468,7 @@ class Collection extends BaseCollection {
     constructor(json) {
         super(json);
         this.itemIds = [];
+        this.slugName = json?.["slugName"];
         this.collectionId = json?.["collectionId"];
         this.collectionName = json?.["collectionName"];
         this.featuredCollection = json?.["featuredCategory"];
@@ -2648,12 +2650,22 @@ class Product {
         this.quantity = json?.["quantity"] ?? 0;
         this.whislist = false;
         this.itemVariant = json?.["itemVariant"] ?? [];
+        // Variants saved with `options: [{name, value}]` expose them to the variant picker through
+        // `properties`. Existing `properties` keys win; variants without `options` are untouched.
+        this.itemVariant.forEach((variant) => {
+            variant.properties = variant.properties ?? {};
+            variant.options?.forEach((option) => {
+                if (option?.name && !(option.name in variant.properties))
+                    variant.properties[option.name] = option.value;
+            });
+        });
         this.makingChargePercentage = json?.["makingChargePercentage"] ?? 0;
         this.jewelleryPrice = json?.["jewelleryPrice"] ?? 0;
         this.materials = json?.["materials"];
         this.baseWeight = json?.["baseWeight"] ?? 0;
         this.jewelryPriceBreakup = json?.["jewelryPriceBreakup"] ?? {};
         this.configs = json?.["configs"] ?? {};
+        this.customFieldValues = json?.["customFieldValues"] ?? {};
         this.totalReviewCount = json?.["totalReviewCount"] ?? 0;
         this.averageRating = json?.["averageRating"] ?? 0;
         if (this.itemVariant?.length > 0) {
@@ -2861,7 +2873,32 @@ class RestService {
             .get(this.BASE_URL + `ecommerce/inventory/${businessId}/brand`)
             .pipe(map((response) => (response.data ?? response)?.map((brand) => new Brand(brand))));
     }
-    getFilteredProduct(collectionIds, categoryIds, searchText, minPrice, maxPrice, minRating, maxRating, sortBy, pageNo, size, brandIds = []) {
+    // PUT product/custom-field/query-options. Returns sorts + filter groups for the sidebar.
+    // Ids and slugs are arrays in the JSON body and are combined: a product in any listed category
+    // matches, and in any listed collection. When both lists are sent a product must match one of each.
+    // An unseeded business returns four sorts and `groups: []`; callers keep the legacy sidebar then.
+    getFilterOptions(scope = {}) {
+        const businessId = this.storage.getItem('bId') ?? this.storage.getItem('businessId') ?? '';
+        const body = {
+            businessId,
+            categoryIds: scope.categoryIds ?? [],
+            collectionIds: scope.collectionIds ?? [],
+            categorySlugNames: scope.categorySlugNames ?? [],
+            collectionSlugNames: scope.collectionSlugNames ?? [],
+        };
+        return this.http
+            .put(this.BASE_URL + 'ecommerce/product/custom-field/query-options', body)
+            .pipe(map((response) => {
+            // Wrapped as { data: {...} }; tolerate an unwrapped body too.
+            const body = response?.data ?? response ?? {};
+            return {
+                sorts: body.sorts ?? [],
+                groups: body.groups ?? [],
+                filters: body.filters ?? [],
+            };
+        }));
+    }
+    getFilteredProduct(collectionIds, categoryIds, searchText, minPrice, maxPrice, minRating, maxRating, sortBy, pageNo, size, brandIds = [], extra = {}) {
         this.getBusinessDetails();
         let payload = {
             businessId: this.storage.getItem('bId') ?? this.storage.getItem('businessId'),
@@ -2884,6 +2921,16 @@ class RestService {
             payload['minRating'] = minRating;
         if (maxRating > 0)
             payload['maxRating'] = maxRating;
+        // Sent on jewellery listings too: the backend applies them there as well.
+        if (extra.customFieldFilters?.length)
+            payload['customFieldFilters'] = extra.customFieldFilters;
+        if (extra.sortDirection)
+            payload['sortDirection'] = extra.sortDirection;
+        // Slugs are combined (OR) with the id arrays and are accepted on jewellery search as well.
+        if (extra.categorySlugName?.length)
+            payload['categorySlugName'] = extra.categorySlugName;
+        if (extra.collectionSlugName?.length)
+            payload['collectionSlugName'] = extra.collectionSlugName;
         return this.http
             .put(this.BASE_URL +
             `ecommerce/product/itemV2/search?isJewellery=${this.isJewellery}`, payload)
@@ -3256,6 +3303,11 @@ class RestService {
     getBookingGroup(groupId) {
         return this.http.get(this.APPOINTMENT_URL + `booking/group/${groupId}`);
     }
+    /** Fetched on click, not pre-cached on the booking - ecommerce generates/caches the invoice PDF
+     * the first time it's asked for, so there's nothing to gain by fetching it earlier. */
+    getBookingInvoiceUrl(groupId) {
+        return this.http.get(this.APPOINTMENT_URL + `booking/group/${groupId}/invoice-url`);
+    }
     generatePaymentToken(groupId) {
         return this.http.post(this.APPOINTMENT_URL + `payment/token?groupId=${groupId}`, {});
     }
@@ -16724,6 +16776,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: EventsService }, { type: i3$2.MatDialog }] });
 
+// Path-based links into the product list page: /list/{category}/{collection}.
+// Slugs come from the backend `slugName` (`Mens Wear` -> `mens-wear`). A row without one yet
+// falls back to the same rule applied to its name, so the link still resolves.
+function slugFromName(name) {
+    return (name ?? '')
+        .trim()
+        .toLowerCase()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/[\s_]+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+}
+function listSlug(item) {
+    if (!item)
+        return '';
+    if (typeof item === 'string')
+        return slugFromName(item);
+    const slug = item.slugName?.trim();
+    if (slug)
+        return slug;
+    return slugFromName(item.categoryName ?? item.collectionName ?? item.refName ?? item.name);
+}
+/** Commands for `router.navigate`, e.g. `['/list', 'mens-wear', 'summer-wear']`. */
+function listPath(target) {
+    const category = listSlug(target.category);
+    const collection = listSlug(target.collection);
+    const commands = ['/list'];
+    if (category)
+        commands.push(category);
+    if (collection)
+        commands.push(collection);
+    return commands;
+}
+/**
+ * Slug segments of a list page pathname, at most `[category, collection]`.
+ * `/list/mens-wear/summer-wear` and a host route that serves the list at the root,
+ * `/mens-wear/summer-wear`, both give `['mens-wear', 'summer-wear']`.
+ */
+function parseListPath(pathname) {
+    const segments = (pathname ?? '')
+        .split('?')[0]
+        .split('#')[0]
+        .split('/')
+        .filter(Boolean)
+        .map((segment) => {
+        try {
+            return decodeURIComponent(segment);
+        }
+        catch {
+            return segment;
+        }
+    });
+    const listIndex = segments.indexOf('list');
+    return listIndex >= 0 ? segments.slice(listIndex + 1, listIndex + 3) : segments.slice(0, 2);
+}
+
 class FooterComponent extends BaseSection {
     constructor(_eventService, restService, matDialog, router) {
         super();
@@ -16816,14 +16924,16 @@ class FooterComponent extends BaseSection {
             this.popularSearchedCategories = res;
         });
     }
-    redirectToCollection(collectionName, categoryName) {
-        this.router.navigate(['/list'], { queryParams: { category: categoryName.replaceAll(" ", '_'), collections: collectionName?.replaceAll(" ", '_'), pageNo: 1 } });
+    // Popular searches rows: a category (`categoryName`) and its collections (`refName`). Each may
+    // carry `slugName`; listPath falls back to slugifying the name when it does not.
+    redirectToCollection(collection, category) {
+        this.router.navigate(listPath({ category, collection }), { queryParams: { pageNo: 1 } });
     }
-    redirectToCategory(categoryName) {
-        this.router.navigate(['/list'], { queryParams: { category: categoryName.replaceAll(" ", '_'), pageNo: 1 } });
+    redirectToCategory(category) {
+        this.router.navigate(listPath({ category }), { queryParams: { pageNo: 1 } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i3$2.MatDialog }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\n  [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\n  <div>\n    <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\n      <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\n      <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\n      <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\n      <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"content?.textDescription?.display\">\n      <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"content?.popularSearches\">\n      <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\n    </ng-container>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n\n<ng-template #Footer1>\n  <div class=\"row align-items-center\">\n    <div class=\"col-md-4\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n      </div>\n      <div>\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-8\">\n      <div class=\"row\">\n        <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <hr *ngIf=\"content?.displayBranding\">\n  <div *ngIf=\"content?.displayBranding\">\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #Footer2>\n  <div class=\"row align-items-center\">\n    <div class=\"col-md-3\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n      </div>\n      <div>\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-9\">\n      <div class=\"row\">\n        <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <hr *ngIf=\"content?.displayBranding\">\n  <div *ngIf=\"content?.displayBranding\">\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #Footer3>\n  <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\n    <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n  </div>\n  <hr>\n  <div class=\"row justify-content-between\">\n    <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\n      [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #Footer4>\n  <div class=\"row align-items-center\">\n    <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n  </div>\n  <hr>\n  <div class=\"row justify-content-between\">\n    <div class=\"col-md-4\">\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #logoSection>\n  <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n      *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\n          (click)=\"navigateToHome()\">\n      </div>\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\n        (click)=\"navigateToHome()\">\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n      </div>\n    </div>\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n      *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n        [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n        loading=\"lazy\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descSection>\n  <ng-container *ngIf=\"content?.additionalDetails as textItem\">\n    <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\n      [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\n  </ng-container>\n  <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\n</ng-template>\n\n<ng-template #socialIcons>\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n    <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\n        <div class=\"icons\">\n          <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\n            [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"heading-small text-center  branding-text\">Powered By <a class=\"branding-text fw-600\"\n      href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\n</ng-template>\n\n<ng-template #pagesHorizontal>\n  <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\n    [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\" [style.color]=\"style?.background?.accentColor\">\n    {{page.pageName}}\n  </div>\n</ng-template>\n\n<!-- <ng-template #pagesVertical>\n  <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\n    <div class=\"pageType mb-3\">{{pageLink}}</div>\n    <ng-container *ngFor=\"let page of pages\">\n      <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\n    </ng-container>\n  </div>\n</ng-template> -->\n\n<ng-template #foldersVertical>\n  <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\n    [class.w-50]=\"screenWidth < 475\">\n    <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\n    <div class=\"mt-15\">\n      <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\n        <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\n          <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\n            {{page.label}}</div>\n          <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\n            [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\n    </div>\n  </div>\n  <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\n    <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #addLinks let-folderIndex=\"data\">\n  <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\n    <mat-icon>add</mat-icon>\n  </div>\n</ng-template>\n\n<ng-template #addFolder>\n  <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\n    <mat-icon>add</mat-icon>\n  </div>\n</ng-template>\n\n<ng-template #popularSearches>\n  <div class=\"popular-searches mt-4\">\n    <div class=\"popular-searches-title mb-2\">Popular Searches</div>\n    <hr class=\"mb-4\">\n    <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\n      <div class=\"popular-category mb-4\">\n        <div class=\"category-heading mb-2\" (click)=\"redirectToCategory(category.categoryName)\">{{category.categoryName}}\n        </div>\n        <div class=\"category-links d-flex flex-wrap gap-2\">\n          <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\n            <span class=\"popular-link\"\n              (click)=\"redirectToCollection(collection.refName,category.categoryName)\">{{collection.refName}}</span>\n            <span *ngIf=\"!last\" class=\"separator\">|</span>\n          </ng-container>\n        </div>\n        <hr *ngIf=\"!last\">\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #textDescription>\n  <div class=\"text-description mt-2\">\n    <ng-container *ngIf=\"content?.textDescription as textDesc\">\n      <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\n        [sectionId]=\"data?.id\"></simpo-text-editor>\n    </ng-container>\n  </div>\n  <hr>\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\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: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: FormsModule }, { 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: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\n  [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\n  <div>\n    <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\n      <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\n      <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\n      <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\n      <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"content?.textDescription?.display\">\n      <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"content?.popularSearches\">\n      <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\n    </ng-container>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n\n<ng-template #Footer1>\n  <div class=\"row align-items-center\">\n    <div class=\"col-md-4\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n      </div>\n      <div>\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-8\">\n      <div class=\"row\">\n        <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <hr *ngIf=\"content?.displayBranding\">\n  <div *ngIf=\"content?.displayBranding\">\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #Footer2>\n  <div class=\"row align-items-center\">\n    <div class=\"col-md-3\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n      </div>\n      <div>\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-9\">\n      <div class=\"row\">\n        <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <hr *ngIf=\"content?.displayBranding\">\n  <div *ngIf=\"content?.displayBranding\">\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #Footer3>\n  <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\n    <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n  </div>\n  <hr>\n  <div class=\"row justify-content-between\">\n    <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\n      [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #Footer4>\n  <div class=\"row align-items-center\">\n    <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n  </div>\n  <hr>\n  <div class=\"row justify-content-between\">\n    <div class=\"col-md-4\">\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #logoSection>\n  <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n      *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\n          (click)=\"navigateToHome()\">\n      </div>\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\n        (click)=\"navigateToHome()\">\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n      </div>\n    </div>\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n      *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n        [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n        loading=\"lazy\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descSection>\n  <ng-container *ngIf=\"content?.additionalDetails as textItem\">\n    <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\n      [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\n  </ng-container>\n  <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\n</ng-template>\n\n<ng-template #socialIcons>\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n    <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\n        <div class=\"icons\">\n          <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\n            [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"heading-small text-center  branding-text\">Powered By <a class=\"branding-text fw-600\"\n      href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\n</ng-template>\n\n<ng-template #pagesHorizontal>\n  <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\n    [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\" [style.color]=\"style?.background?.accentColor\">\n    {{page.pageName}}\n  </div>\n</ng-template>\n\n<!-- <ng-template #pagesVertical>\n  <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\n    <div class=\"pageType mb-3\">{{pageLink}}</div>\n    <ng-container *ngFor=\"let page of pages\">\n      <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\n    </ng-container>\n  </div>\n</ng-template> -->\n\n<ng-template #foldersVertical>\n  <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\n    [class.w-50]=\"screenWidth < 475\">\n    <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\n    <div class=\"mt-15\">\n      <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\n        <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\n          <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\n            {{page.label}}</div>\n          <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\n            [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\n    </div>\n  </div>\n  <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\n    <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #addLinks let-folderIndex=\"data\">\n  <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\n    <mat-icon>add</mat-icon>\n  </div>\n</ng-template>\n\n<ng-template #addFolder>\n  <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\n    <mat-icon>add</mat-icon>\n  </div>\n</ng-template>\n\n<ng-template #popularSearches>\n  <div class=\"popular-searches mt-4\">\n    <div class=\"popular-searches-title mb-2\">Popular Searches</div>\n    <hr class=\"mb-4\">\n    <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\n      <div class=\"popular-category mb-4\">\n        <div class=\"category-heading mb-2\" (click)=\"redirectToCategory(category)\">{{category.categoryName}}\n        </div>\n        <div class=\"category-links d-flex flex-wrap gap-2\">\n          <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\n            <span class=\"popular-link\"\n              (click)=\"redirectToCollection(collection, category)\">{{collection.refName}}</span>\n            <span *ngIf=\"!last\" class=\"separator\">|</span>\n          </ng-container>\n        </div>\n        <hr *ngIf=\"!last\">\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #textDescription>\n  <div class=\"text-description mt-2\">\n    <ng-container *ngIf=\"content?.textDescription as textDesc\">\n      <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\n        [sectionId]=\"data?.id\"></simpo-text-editor>\n    </ng-container>\n  </div>\n  <hr>\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\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: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: FormsModule }, { 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: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
                 //directives
                 SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
@@ -16843,7 +16953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ContentFitDirective,
                         TextEditorComponent,
                         HoverDirective
-                    ], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\n  [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\n  <div>\n    <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\n      <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\n      <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\n      <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\n      <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"content?.textDescription?.display\">\n      <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"content?.popularSearches\">\n      <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\n    </ng-container>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n\n<ng-template #Footer1>\n  <div class=\"row align-items-center\">\n    <div class=\"col-md-4\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n      </div>\n      <div>\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-8\">\n      <div class=\"row\">\n        <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <hr *ngIf=\"content?.displayBranding\">\n  <div *ngIf=\"content?.displayBranding\">\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #Footer2>\n  <div class=\"row align-items-center\">\n    <div class=\"col-md-3\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n      </div>\n      <div>\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-9\">\n      <div class=\"row\">\n        <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <hr *ngIf=\"content?.displayBranding\">\n  <div *ngIf=\"content?.displayBranding\">\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #Footer3>\n  <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\n    <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n  </div>\n  <hr>\n  <div class=\"row justify-content-between\">\n    <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\n      [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #Footer4>\n  <div class=\"row align-items-center\">\n    <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n  </div>\n  <hr>\n  <div class=\"row justify-content-between\">\n    <div class=\"col-md-4\">\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #logoSection>\n  <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n      *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\n          (click)=\"navigateToHome()\">\n      </div>\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\n        (click)=\"navigateToHome()\">\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n      </div>\n    </div>\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n      *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n        [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n        loading=\"lazy\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descSection>\n  <ng-container *ngIf=\"content?.additionalDetails as textItem\">\n    <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\n      [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\n  </ng-container>\n  <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\n</ng-template>\n\n<ng-template #socialIcons>\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n    <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\n        <div class=\"icons\">\n          <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\n            [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"heading-small text-center  branding-text\">Powered By <a class=\"branding-text fw-600\"\n      href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\n</ng-template>\n\n<ng-template #pagesHorizontal>\n  <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\n    [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\" [style.color]=\"style?.background?.accentColor\">\n    {{page.pageName}}\n  </div>\n</ng-template>\n\n<!-- <ng-template #pagesVertical>\n  <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\n    <div class=\"pageType mb-3\">{{pageLink}}</div>\n    <ng-container *ngFor=\"let page of pages\">\n      <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\n    </ng-container>\n  </div>\n</ng-template> -->\n\n<ng-template #foldersVertical>\n  <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\n    [class.w-50]=\"screenWidth < 475\">\n    <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\n    <div class=\"mt-15\">\n      <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\n        <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\n          <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\n            {{page.label}}</div>\n          <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\n            [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\n    </div>\n  </div>\n  <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\n    <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #addLinks let-folderIndex=\"data\">\n  <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\n    <mat-icon>add</mat-icon>\n  </div>\n</ng-template>\n\n<ng-template #addFolder>\n  <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\n    <mat-icon>add</mat-icon>\n  </div>\n</ng-template>\n\n<ng-template #popularSearches>\n  <div class=\"popular-searches mt-4\">\n    <div class=\"popular-searches-title mb-2\">Popular Searches</div>\n    <hr class=\"mb-4\">\n    <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\n      <div class=\"popular-category mb-4\">\n        <div class=\"category-heading mb-2\" (click)=\"redirectToCategory(category.categoryName)\">{{category.categoryName}}\n        </div>\n        <div class=\"category-links d-flex flex-wrap gap-2\">\n          <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\n            <span class=\"popular-link\"\n              (click)=\"redirectToCollection(collection.refName,category.categoryName)\">{{collection.refName}}</span>\n            <span *ngIf=\"!last\" class=\"separator\">|</span>\n          </ng-container>\n        </div>\n        <hr *ngIf=\"!last\">\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #textDescription>\n  <div class=\"text-description mt-2\">\n    <ng-container *ngIf=\"content?.textDescription as textDesc\">\n      <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\n        [sectionId]=\"data?.id\"></simpo-text-editor>\n    </ng-container>\n  </div>\n  <hr>\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\n"] }]
+                    ], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\n  [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\n  <div>\n    <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\n      <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\n      <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\n      <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\n      <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"content?.textDescription?.display\">\n      <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"content?.popularSearches\">\n      <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\n    </ng-container>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n\n<ng-template #Footer1>\n  <div class=\"row align-items-center\">\n    <div class=\"col-md-4\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n      </div>\n      <div>\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-8\">\n      <div class=\"row\">\n        <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <hr *ngIf=\"content?.displayBranding\">\n  <div *ngIf=\"content?.displayBranding\">\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #Footer2>\n  <div class=\"row align-items-center\">\n    <div class=\"col-md-3\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n      </div>\n      <div>\n        <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n    <div class=\"col-md-9\">\n      <div class=\"row\">\n        <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n      </div>\n      <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n        <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n      </div>\n    </div>\n  </div>\n  <hr *ngIf=\"content?.displayBranding\">\n  <div *ngIf=\"content?.displayBranding\">\n    <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #Footer3>\n  <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\n    <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n  </div>\n  <hr>\n  <div class=\"row justify-content-between\">\n    <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\n      [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #Footer4>\n  <div class=\"row align-items-center\">\n    <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n  </div>\n  <hr>\n  <div class=\"row justify-content-between\">\n    <div class=\"col-md-4\">\n      <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\n      <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n    </div>\n    <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\n      <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #logoSection>\n  <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n      *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\n          (click)=\"navigateToHome()\">\n      </div>\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\n        (click)=\"navigateToHome()\">\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n      </div>\n    </div>\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n      *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n        [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n        loading=\"lazy\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descSection>\n  <ng-container *ngIf=\"content?.additionalDetails as textItem\">\n    <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\n      [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\n  </ng-container>\n  <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\n</ng-template>\n\n<ng-template #socialIcons>\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n    <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\n        <div class=\"icons\">\n          <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\n            [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"heading-small text-center  branding-text\">Powered By <a class=\"branding-text fw-600\"\n      href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\n</ng-template>\n\n<ng-template #pagesHorizontal>\n  <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\n    [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\" [style.color]=\"style?.background?.accentColor\">\n    {{page.pageName}}\n  </div>\n</ng-template>\n\n<!-- <ng-template #pagesVertical>\n  <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\n    <div class=\"pageType mb-3\">{{pageLink}}</div>\n    <ng-container *ngFor=\"let page of pages\">\n      <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\n    </ng-container>\n  </div>\n</ng-template> -->\n\n<ng-template #foldersVertical>\n  <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\n    [class.w-50]=\"screenWidth < 475\">\n    <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\n    <div class=\"mt-15\">\n      <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\n        <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\n          <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\n            {{page.label}}</div>\n          <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\n            [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\n    </div>\n  </div>\n  <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\n    <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #addLinks let-folderIndex=\"data\">\n  <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\n    <mat-icon>add</mat-icon>\n  </div>\n</ng-template>\n\n<ng-template #addFolder>\n  <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\n    <mat-icon>add</mat-icon>\n  </div>\n</ng-template>\n\n<ng-template #popularSearches>\n  <div class=\"popular-searches mt-4\">\n    <div class=\"popular-searches-title mb-2\">Popular Searches</div>\n    <hr class=\"mb-4\">\n    <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\n      <div class=\"popular-category mb-4\">\n        <div class=\"category-heading mb-2\" (click)=\"redirectToCategory(category)\">{{category.categoryName}}\n        </div>\n        <div class=\"category-links d-flex flex-wrap gap-2\">\n          <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\n            <span class=\"popular-link\"\n              (click)=\"redirectToCollection(collection, category)\">{{collection.refName}}</span>\n            <span *ngIf=\"!last\" class=\"separator\">|</span>\n          </ng-container>\n        </div>\n        <hr *ngIf=\"!last\">\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #textDescription>\n  <div class=\"text-description mt-2\">\n    <ng-container *ngIf=\"content?.textDescription as textDesc\">\n      <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\n        [sectionId]=\"data?.id\"></simpo-text-editor>\n    </ng-container>\n  </div>\n  <hr>\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i3$2.MatDialog }, { type: i2$2.Router }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -17271,6 +17381,7 @@ class HeaderSectionComponent {
         this.showList = false;
         this.dropdownLeft = 0;
         this.dropdownTop = 0;
+        this.closeDropdownTimeout = null;
         this.showCollections = false;
         this.storeAvaiable = false;
         this.schemeAvailable = false;
@@ -17462,6 +17573,7 @@ class HeaderSectionComponent {
                 offcanvasElement.removeEventListener('hidden.bs.offcanvas', this.offcanvasHiddenHandler);
             }
         }
+        this.cancelCloseDropdown();
     }
     checkPassbookApp() {
         const details = this.storage.getItem('bId');
@@ -17747,18 +17859,22 @@ class HeaderSectionComponent {
         this.router.navigate(['/store-list']);
     }
     applyFilterToList(obj, type) {
+        // `obj` is a collection name string here; prefer the loaded collection row for its slugName.
+        const collection = typeof obj === 'string'
+            ? (this.collectionList?.find((c) => c?.collectionName === obj || c?.refName === obj) ?? obj)
+            : obj;
         if (type == 'price') {
-            this.router.navigate(['/list'], { queryParams: { category: this.selectedCategory?.categoryName, minPrice: obj?.minPrice, maxPrice: obj?.maxPrice, pageNo: 1 } });
+            this.router.navigate(listPath({ category: this.selectedCategory }), { queryParams: { minPrice: obj?.minPrice, maxPrice: obj?.maxPrice, pageNo: 1 } });
         }
         if (type == 'collection') {
-            this.router.navigate(['/list'], { queryParams: { category: this.selectedCategory?.categoryName, collections: obj?.replaceAll(" ", '_'), pageNo: 1 } });
+            this.router.navigate(listPath({ category: this.selectedCategory, collection }), { queryParams: { pageNo: 1 } });
         }
         if (type == 'collections') {
-            this.router.navigate(['/list'], { queryParams: { collections: obj?.replaceAll(" ", '_'), pageNo: 1 } });
+            this.router.navigate(listPath({ collection }), { queryParams: { pageNo: 1 } });
         }
     }
     filterByCategory() {
-        this.router.navigate(['/list'], { queryParams: { category: this.selectedCategory?.categoryName, pageNo: 1 } });
+        this.router.navigate(listPath({ category: this.selectedCategory }), { queryParams: { pageNo: 1 } });
     }
     setPincode() {
         if (this.pincode && this.pincode?.length == 6) {
@@ -17855,7 +17971,26 @@ class HeaderSectionComponent {
         this.dropdownLeft = targetRect.left - containerRect.left;
         this.dropdownTop = targetRect.bottom - containerRect.top;
     }
+    // Closing on mouseleave happens after a short grace period instead of instantly, so briefly
+    // leaving the hoverable area while moving from the tab toward the panel (mouse-path
+    // imprecision, etc.) doesn't close the menu before the pointer arrives - re-entering (including
+    // onto the panel itself) cancels the pending close via cancelCloseDropdown().
+    scheduleCloseDropdown() {
+        this.cancelCloseDropdown();
+        this.closeDropdownTimeout = setTimeout(() => {
+            this.showList = false;
+            this.selectedCategory = null;
+            this.openSubmenuChild = null;
+        }, 200);
+    }
+    cancelCloseDropdown() {
+        if (this.closeDropdownTimeout) {
+            clearTimeout(this.closeDropdownTimeout);
+            this.closeDropdownTimeout = null;
+        }
+    }
     toggleChildMenu(ele, event) {
+        this.cancelCloseDropdown();
         this.updateDropdownPosition(event);
         if (this.showList && this.selectedCategory === ele.children) {
             this.showList = false;
@@ -17877,7 +18012,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: i3$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: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\">\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n    [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\n    <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\n      [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n      simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [class.dropdown-open]=\"showList\">\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n      <ng-container *ngIf=\"style?.headline?.display\">\n        <div>\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"style?.countdown?.display\">\n        <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\"\n          [isHeaderRenderer]=\"true\">\n        </simpo-countdown-banner>\n      </ng-container>\n\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n      </div>\n\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\n      </div>\n\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"style?.background?.color\">search</mat-icon>\n      </div> -->\n\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n      </ng-container>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n    </div>\n\n    <ng-container\n      *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n    </ng-container>\n  </div>\n\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n  </ng-container> -->\n\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\n    <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\n    <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\n  </ng-container>\n</section>\n\n<ng-template #header1Template>\n  <div class=\"header1\">\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </div>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header2Template>\n  <div class=\"header1\">\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header3Template>\n  <div class=\"header1\">\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </ng-container>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header4Template>\n  <div class=\"header1\">\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container> </ng-container>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b>{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\n    [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\n    (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n    <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\n      <div class=\"dropdown_menu_static w-100\"\n        (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\n        <div class=\"dd-nav-scroll\">\n          <div class=\"dd-nav\">\n            <ng-container *ngFor=\"let item of footerMenu\">\n              <ng-container *ngIf=\"item.showHeader\">\n                <div class=\"dd-tab-wrap\">\n                  <button type=\"button\" class=\"dd-tab\"\n                    [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\n                    (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\n                    <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n                      [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\n                    <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n                      viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n                      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n                        fill=\"#000000\" />\n                    </svg>\n                  </button>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n              style=\"display: block;\">\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-template #pageLinksDefault>\n      <div class=\"drawer-rows\">\n        <ng-container *ngFor=\"let item of footerMenu\">\n          <ng-container *ngIf=\"item.showHeader\">\n            <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\n              <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n              <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\n                [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-template>\n\n  </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <div class=\"d-flex\">\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n      <div *ngFor=\"let button of action?.buttons\">\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n      </div>\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n        (click)=\"navigateLogin()\" *ngIf=\"(passbookAppStatus || appointmentAppStatus) && !loggedIn\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\n        <mat-icon>person_outline</mat-icon>\n        Login\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn && !isMobile\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n  </div>\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\n    (click)=\"goToAccount('LOGIN')\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    &nbsp;\n    Login</button>\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\n    (click)=\"goToAccount('PROFILE')\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    &nbsp;Account</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\n      <div class=\"item-count fw-bold\">\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\n      </div>\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\n      </div>\n    </div>\n\n  </div>\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n    <div class=\"icons\" (click)=\"goToHome()\">\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Home</span>\n    </div>\n    <div class=\"icons\" (click)=\"searchProducts()\">\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Shop</span>\n    </div>\n    <div class=\"icons\" (click)=\"goToWishlist()\">\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\n    </div>\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Cart</span>\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n    </div> -->\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\n      <div class=\"input-group w-75 ml-2\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n          [style.color]=\"backgroundInfo?.accentColor\">\n        <!-- <span class=\"animated-placeholder position-absolute\" \n          [class.animate]=\"animatePlaceholder\"\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\n          {{ currentPlaceholder }}\n        </span> -->\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n      </div>\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n          height=\"30\" version=\"1.1\">\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n          </g>\n        </svg>\n        <div [style.color]=\"accentColor\">Schemes</div>\n      </div>\n    </div>\n    <div class=\"d-flex gap-3 align-items-center\">\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n        Pincode\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n        getPincode}}</div>\n\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your PIN Code unlocks\n        </div>\n        <div class=\"sub-text text-center f-14 pincode-text\">\n          Fastest delivery date, Try-at-Home availability,\n          Nearest store and In-store design!\n        </div>\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n          [class.error-border]=\"pinError\">\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n            class=\"w-75 p-0\">\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n        </div>\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n          Please enter a valid pincode\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n          {{getWishlistItemsCount}}</div>\n      </div>\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n          {{getCartItemsCount}}</div>\n      </div>\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n      </div>\n      <!-- (mouseleave)=\"showLogin = false\" -->\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your Account\n        </div>\n        <div class=\"sub-text text-center f-14\">\n          Access account & manage your orders.\n        </div>\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n            [style.color]=\"style?.background?.color\">Sign Up</div>\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n    <!-- <div> -->\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n    <!-- </div> -->\n  </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n    <ng-container *ngFor=\"let item of getNavbarButton\">\n      <ng-container *ngIf=\"item.showHeader\">\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n        <div class=\"position-relative\">\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n            {{link | uppercase}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\n  <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n    data-bs-backdrop=\"false\"\n    [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n\n    <!-- TOP BAR -->\n    <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\n      <div class=\"drawer-logo\">\n        <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n      </div>\n      <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\n        <mat-icon>chevron_left</mat-icon>\n      </button>\n    </div>\n\n    <!-- BODY -->\n    <div class=\"offcanvas-body drawer-body\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n    </div>\n\n    <!-- DIVIDER + QUICK ACTIONS -->\n    <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\n      <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\n      <div class=\"drawer-actions\">\n        <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ecomProfileTemplate>\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\n\n\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\n\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n    *ngIf=\"loggedIn\">\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n  </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b>{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n  <div class=\"categories-wrapper\" *ngIf=\"!isMobile\" (mouseleave)=\"showList = false; showCollections = false\">\n\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\n\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\n      [style.background]=\"data?.styles?.background?.color\">\n\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.background?.color\"\n        (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\n        {{ele?.label}}\n      </div>\n    </div>\n\n    <!-- [class.hide-dropdown]=\"!showList\" -->\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\n      <div class=\"row w-100 h-100 mega-menu-scroll-row\">\n        <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\n          <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\n              ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\n              ele?.children?.length > 0 && !last ? 'has-right-border' : ''\n            ]\">\n\n            <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\n              <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\n                <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\n                <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\n              </div>\n              <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\n                {{ele?.label | titlecase}}\n              </div>\n            </ng-container>\n\n            <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\n              *ngIf=\"ele?.children?.length > 0\">\n              {{ele?.label | titlecase}}\n            </div>\n            <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\n              <div class=\"d-flex flex-column gap-3 list-item\">\n                <ng-container *ngFor=\"let child of ele?.children\">\n                  <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer d-flex align-items-center gap-2\">\n                    <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\"\n                      class=\"mega-menu-child-logo\" />\n                    <div>\n                      <div>{{child?.label | titlecase}}</div>\n                      <div *ngIf=\"child?.description\" class=\"mega-menu-child-desc\">{{child?.description}}</div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #mobileMenuListTemplate>\n  <div class=\"mobile-menu-container\">\n\n    <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\n      <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\n        (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\n        [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\n        <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\n        <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\"\n          [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n      </div>\n    </div>\n\n    <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\n      <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\n        <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n        <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\n      </div>\n\n      <div class=\"drawer-detail-sections\">\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n          <div class=\"drawer-detail-section\">\n            <ng-container\n              *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\n              <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\n                *ngIf=\"child.imageUrl\">\n                <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\n                <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\n              <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\n                <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\" class=\"mega-menu-child-logo\" />\n                <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n              </div>\n\n              <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\n                <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\n                  data-bs-dismiss=\"offcanvas\">\n                  {{sub?.label | titlecase}}\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\n        <img [src]=\"ele?.imageUrls[0]\" [alt]=\"ele?.categoryName\" class=\"br-12 mobile-category-image\">\n      </div>\n      <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ecommerce_header>\n  <header class=\"site-header\" [ngClass]=\"{\n      'ecom-header1': style?.styling === 'Header1',\n      'ecom-header2': style?.styling === 'Header2',\n      'ecom-header3': style?.styling === 'Header3',\n      'ecom-header4': style?.styling === 'Header4'\n    }\">\n    <!-- Top Bar: Logo, Search, User Actions -->\n    <div class=\"top-bar\">\n\n      <!-- Mobile Menu Toggle -->\n      <div class=\"header-logo-area\" [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\n        <!-- HAMBURGER -->\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\" for=\"mobile-menu-checkbox\"\n          class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n          aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\" (click)=\"goBackMobileMenu()\">\n          <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n          </svg>\n          <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\n          </svg>\n        </label>\n        <!-- FULL SCREEN -->\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\" class=\"mobile-menu-btn\"\n          aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n          </svg>\n        </label>\n\n        <!-- Logo Section -->\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\n            [height]=\"content?.logo?.size\">\n        </a>\n\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n          && content?.logo?.text?.isText \n          && content?.logo?.text?.isIcon \n          && content?.logo?.text?.url\">\n\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\n\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\n            {{ content?.siteName?.value }}\n          </span>\n        </a>\n\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n          && content?.logo?.text?.isText \n          && !content?.logo?.text?.isIcon\">\n\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\n            {{ content?.siteName?.value }}\n          </span>\n        </a>\n      </div>\n\n      <!-- Search Bar -->\n      <div class=\"search-wrapper\"\n        *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\n        <div class=\"search-bar\">\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n            (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Dropdown menu style -->\n      <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\n        (mouseleave)=\"showList = false; selectedCategory = null\">\n        <div class=\"dd-nav-scroll\">\n          <div class=\"dd-nav\">\n            <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\n              <button type=\"button\" class=\"dd-tab\"\n                [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\n                (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\n                <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n                  [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\n                <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n                  viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n                    fill=\"#000000\" />\n                </svg>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n              style=\"display: block;\">\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n\n      <!-- Right Actions -->\n      <div class=\"user-actions\">\n\n        <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\n          <a class=\"action-link icon-only dropdown-search-toggle\"\n            (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n          </a>\n        </ng-container>\n\n        <ng-container *ngIf=\"storeAvaiable\">\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n            *ngIf=\"!getPincode\">\n            <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n              stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n              <path\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\"\n                fill=\"#000000\" />\n            </svg> -->\n\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\n              <g>\n                <path\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\">\n                </path>\n                <path\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\">\n                </path>\n              </g>\n            </svg>\n\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\n\n          </a>\n\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n            [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n              stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\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>\n              <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\n              <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\n              <path d=\"M2 7h20\"></path>\n              <path\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\">\n              </path>\n            </svg>\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\n              getPincode}}</span>\n\n          </a>\n\n          <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n            <div class=\"text text-center mb-2 f-18 fw-bold\">\n              Your PIN Code unlocks\n            </div>\n            <div class=\"sub-text text-center f-14 pincode-text\">\n              Fastest delivery date, Try-at-Home availability,\n              Nearest store and In-store design!\n            </div>\n            <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n              [class.error-border]=\"pinError\">\n              <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n                class=\"w-75 p-0\">\n              <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n            </div>\n            <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n              Please enter a valid pincode\n            </div>\n          </div>\n        </ng-container>\n\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\n          <!-- User Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n          </svg>\n        </a>\n\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\n          <!-- User Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n          </svg>\n        </a>\n\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\n            Your Account\n          </div>\n          <div class=\"sub-text text-center f-14\">\n            Access account & manage your orders.\n          </div>\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n              [style.color]=\"style?.background?.color\">Sign Up</div>\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n          </div>\n        </div>\n\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\n          <!-- Heart Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path\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\">\n            </path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\n        </a>\n\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\n          <!-- Shopping Bag Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\n            <path d=\"M3 6h18\"></path>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\n        </a>\n\n        <a class=\"action-link icon-only icon-container bookings-icon\" (click)=\"goToBookings()\"\n          *ngIf=\"appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled\">\n          <!-- Bookings (calendar-check) Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"4\" y=\"7.5\" width=\"16\" height=\"12.5\" rx=\"2\"></rect>\n            <path d=\"M8 7.5V6a4 4 0 0 1 8 0v1.5\"></path>\n            <path d=\"M9.2 13.6l1.9 1.9 3.7-3.9\"></path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</span>\n        </a>\n\n        <div class=\"dropdown-search-expand\"\n          *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\n          <div class=\"dropdown-search-box\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"dropdown-search-icon search-btn\" (click)=\"searchProducts()\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n            <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\"\n              (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\n      <div class=\"search-bar\">\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n          (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n        </svg>\n      </div>\n    </div>\n\n  </header>\n</ng-template>\n\n<ng-template #fullScreenMenuTemplate>\n  <div class=\"fs-menu\">\n    <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\n    <div class=\"fs-menu-inner\">\n      <div class=\"fs-menu-head\">\n        <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\n          <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n        </div>\n        <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\n          <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\n        </button>\n      </div>\n      <!-- Main level -->\n      <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\n        <ng-container *ngFor=\"let item of footerMenu\">\n          <ng-container *ngIf=\"item.showHeader\">\n            <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\n              (click)=\"onFullScreenItemClick(item)\">\n              <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\n              <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n              <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\"\n                [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n            </a>\n          </ng-container>\n        </ng-container>\n      </nav>\n\n      <!-- Submenu (drill-in) level -->\n      <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\n        <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\n          <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n          <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\n        </button>\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n          <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\n            (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\n            <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n          </a>\n          <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\n            (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\n        </ng-container>\n      </nav>\n      <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\n        <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #bottomStickyNavTemplate>\n  <nav class=\"bs-nav\">\n    <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\n      <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\n        [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\n        <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\n          [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\n      </button>\n    </div>\n  </nav>\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}.pageLinks{width:100%!important;max-width:100%!important}}.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;width:100%;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-btn{cursor:pointer;flex-shrink:0}.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:100}.categories-wrapper .categories-header{border-top:1px solid rgba(0,0,0,.1)}.categories-header{gap:26px!important;overflow-x:auto;margin:8px 8px 0;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:8px;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}}.mega-menu-child-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.mega-menu-child-desc{font-size:11px;color:#999;margin-top:2px;line-height:1.3}\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", "itemIndex"] }, { 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: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.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", "isHeaderRenderer"] }] }); }
+    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\">\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n    [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\n    <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\n      [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n      simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [class.dropdown-open]=\"showList\">\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n      <ng-container *ngIf=\"style?.headline?.display\">\n        <div>\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"style?.countdown?.display\">\n        <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\"\n          [isHeaderRenderer]=\"true\">\n        </simpo-countdown-banner>\n      </ng-container>\n\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n      </div>\n\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\n      </div>\n\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"style?.background?.color\">search</mat-icon>\n      </div> -->\n\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n      </ng-container>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n    </div>\n\n    <ng-container\n      *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n    </ng-container>\n  </div>\n\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n  </ng-container> -->\n\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\n    <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\n    <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\n  </ng-container>\n</section>\n\n<ng-template #header1Template>\n  <div class=\"header1\">\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </div>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header2Template>\n  <div class=\"header1\">\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header3Template>\n  <div class=\"header1\">\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </ng-container>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header4Template>\n  <div class=\"header1\">\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container> </ng-container>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b>{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\n    [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\n    (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n    <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\n      <div class=\"dropdown_menu_static w-100\"\n        (mouseenter)=\"cancelCloseDropdown()\" (mouseleave)=\"scheduleCloseDropdown()\">\n        <div class=\"dd-nav-scroll\">\n          <div class=\"dd-nav\">\n            <ng-container *ngFor=\"let item of footerMenu\">\n              <ng-container *ngIf=\"item.showHeader\">\n                <div class=\"dd-tab-wrap\">\n                  <button type=\"button\" class=\"dd-tab\"\n                    [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\n                    (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\n                    <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n                      [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\n                    <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n                      viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n                      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n                        fill=\"#000000\" />\n                    </svg>\n                  </button>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n              style=\"display: block;\">\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-template #pageLinksDefault>\n      <div class=\"drawer-rows\">\n        <ng-container *ngFor=\"let item of footerMenu\">\n          <ng-container *ngIf=\"item.showHeader\">\n            <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\n              <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n              <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\n                [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-template>\n\n  </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <div class=\"d-flex\">\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n      <div *ngFor=\"let button of action?.buttons\">\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n      </div>\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n        (click)=\"navigateLogin()\" *ngIf=\"(passbookAppStatus || appointmentAppStatus) && !loggedIn\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\n        <mat-icon>person_outline</mat-icon>\n        Login\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn && !isMobile\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n  </div>\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\n    (click)=\"goToAccount('LOGIN')\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    &nbsp;\n    Login</button>\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\n    (click)=\"goToAccount('PROFILE')\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    &nbsp;Account</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\n      <div class=\"item-count fw-bold\">\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\n      </div>\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\n      </div>\n    </div>\n\n  </div>\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n    <div class=\"icons\" (click)=\"goToHome()\">\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Home</span>\n    </div>\n    <div class=\"icons\" (click)=\"searchProducts()\">\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Shop</span>\n    </div>\n    <div class=\"icons\" (click)=\"goToWishlist()\">\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\n    </div>\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Cart</span>\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n    </div> -->\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\n      <div class=\"input-group w-75 ml-2\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n          [style.color]=\"backgroundInfo?.accentColor\">\n        <!-- <span class=\"animated-placeholder position-absolute\" \n          [class.animate]=\"animatePlaceholder\"\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\n          {{ currentPlaceholder }}\n        </span> -->\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n      </div>\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n          height=\"30\" version=\"1.1\">\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n          </g>\n        </svg>\n        <div [style.color]=\"accentColor\">Schemes</div>\n      </div>\n    </div>\n    <div class=\"d-flex gap-3 align-items-center\">\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n        Pincode\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n        getPincode}}</div>\n\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your PIN Code unlocks\n        </div>\n        <div class=\"sub-text text-center f-14 pincode-text\">\n          Fastest delivery date, Try-at-Home availability,\n          Nearest store and In-store design!\n        </div>\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n          [class.error-border]=\"pinError\">\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n            class=\"w-75 p-0\">\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n        </div>\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n          Please enter a valid pincode\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n          {{getWishlistItemsCount}}</div>\n      </div>\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n          {{getCartItemsCount}}</div>\n      </div>\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n      </div>\n      <!-- (mouseleave)=\"showLogin = false\" -->\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your Account\n        </div>\n        <div class=\"sub-text text-center f-14\">\n          Access account & manage your orders.\n        </div>\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n            [style.color]=\"style?.background?.color\">Sign Up</div>\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n    <!-- <div> -->\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n    <!-- </div> -->\n  </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n    <ng-container *ngFor=\"let item of getNavbarButton\">\n      <ng-container *ngIf=\"item.showHeader\">\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n        <div class=\"position-relative\">\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n            {{link | uppercase}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\n  <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n    data-bs-backdrop=\"false\"\n    [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n\n    <!-- TOP BAR -->\n    <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\n      <div class=\"drawer-logo\">\n        <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n      </div>\n      <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\n        <mat-icon>chevron_left</mat-icon>\n      </button>\n    </div>\n\n    <!-- BODY -->\n    <div class=\"offcanvas-body drawer-body\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n    </div>\n\n    <!-- DIVIDER + QUICK ACTIONS -->\n    <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\n      <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\n      <div class=\"drawer-actions\">\n        <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ecomProfileTemplate>\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\n\n\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\n\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n    *ngIf=\"loggedIn\">\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n  </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b>{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n  <div class=\"categories-wrapper\" *ngIf=\"!isMobile\" (mouseleave)=\"showList = false; showCollections = false\">\n\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\n\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\n      [style.background]=\"data?.styles?.background?.color\">\n\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.background?.color\"\n        (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\n        {{ele?.label}}\n      </div>\n    </div>\n\n    <!-- [class.hide-dropdown]=\"!showList\" -->\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\n      <div class=\"row w-100 h-100 mega-menu-scroll-row\">\n        <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\n          <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\n              ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\n              ele?.children?.length > 0 && !last ? 'has-right-border' : ''\n            ]\">\n\n            <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\n              <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\n                <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\n                <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\n              </div>\n              <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\n                {{ele?.label | titlecase}}\n              </div>\n            </ng-container>\n\n            <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\n              *ngIf=\"ele?.children?.length > 0\">\n              {{ele?.label | titlecase}}\n            </div>\n            <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\n              <div class=\"d-flex flex-column gap-3 list-item\">\n                <ng-container *ngFor=\"let child of ele?.children\">\n                  <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer d-flex align-items-center gap-2\">\n                    <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\"\n                      class=\"mega-menu-child-logo\" />\n                    <div>\n                      <div>{{child?.label | titlecase}}</div>\n                      <div *ngIf=\"child?.description\" class=\"mega-menu-child-desc\">{{child?.description}}</div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #mobileMenuListTemplate>\n  <div class=\"mobile-menu-container\">\n\n    <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\n      <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\n        (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\n        [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\n        <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\n        <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\"\n          [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n      </div>\n    </div>\n\n    <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\n      <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\n        <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n        <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\n      </div>\n\n      <div class=\"drawer-detail-sections\">\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n          <div class=\"drawer-detail-section\">\n            <ng-container\n              *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\n              <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\n                *ngIf=\"child.imageUrl\">\n                <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\n                <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\n              <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\n                <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\" class=\"mega-menu-child-logo\" />\n                <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n              </div>\n\n              <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\n                <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\n                  data-bs-dismiss=\"offcanvas\">\n                  {{sub?.label | titlecase}}\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\n        <img [src]=\"ele?.imageUrls[0]\" [alt]=\"ele?.categoryName\" class=\"br-12 mobile-category-image\">\n      </div>\n      <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ecommerce_header>\n  <header class=\"site-header\" [ngClass]=\"{\n      'ecom-header1': style?.styling === 'Header1',\n      'ecom-header2': style?.styling === 'Header2',\n      'ecom-header3': style?.styling === 'Header3',\n      'ecom-header4': style?.styling === 'Header4'\n    }\">\n    <!-- Top Bar: Logo, Search, User Actions -->\n    <div class=\"top-bar\">\n\n      <!-- Mobile Menu Toggle -->\n      <div class=\"header-logo-area\" [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\n        <!-- HAMBURGER -->\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\" for=\"mobile-menu-checkbox\"\n          class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n          aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\" (click)=\"goBackMobileMenu()\">\n          <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n          </svg>\n          <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\n          </svg>\n        </label>\n        <!-- FULL SCREEN -->\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\" class=\"mobile-menu-btn\"\n          aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n          </svg>\n        </label>\n\n        <!-- Logo Section -->\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\n            [height]=\"content?.logo?.size\">\n        </a>\n\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n          && content?.logo?.text?.isText \n          && content?.logo?.text?.isIcon \n          && content?.logo?.text?.url\">\n\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\n\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\n            {{ content?.siteName?.value }}\n          </span>\n        </a>\n\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n          && content?.logo?.text?.isText \n          && !content?.logo?.text?.isIcon\">\n\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\n            {{ content?.siteName?.value }}\n          </span>\n        </a>\n      </div>\n\n      <!-- Search Bar -->\n      <div class=\"search-wrapper\"\n        *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\n        <div class=\"search-bar\">\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n            (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Dropdown menu style -->\n      <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\n        (mouseenter)=\"cancelCloseDropdown()\" (mouseleave)=\"scheduleCloseDropdown()\">\n        <div class=\"dd-nav-scroll\">\n          <div class=\"dd-nav\">\n            <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\n              <button type=\"button\" class=\"dd-tab\"\n                [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\n                (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\n                <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n                  [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\n                <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n                  viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n                    fill=\"#000000\" />\n                </svg>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n              style=\"display: block;\">\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n\n      <!-- Right Actions -->\n      <div class=\"user-actions\">\n\n        <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\n          <a class=\"action-link icon-only dropdown-search-toggle\"\n            (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n          </a>\n        </ng-container>\n\n        <ng-container *ngIf=\"storeAvaiable\">\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n            *ngIf=\"!getPincode\">\n            <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n              stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n              <path\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\"\n                fill=\"#000000\" />\n            </svg> -->\n\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\n              <g>\n                <path\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\">\n                </path>\n                <path\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\">\n                </path>\n              </g>\n            </svg>\n\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\n\n          </a>\n\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n            [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n              stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\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>\n              <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\n              <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\n              <path d=\"M2 7h20\"></path>\n              <path\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\">\n              </path>\n            </svg>\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\n              getPincode}}</span>\n\n          </a>\n\n          <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n            <div class=\"text text-center mb-2 f-18 fw-bold\">\n              Your PIN Code unlocks\n            </div>\n            <div class=\"sub-text text-center f-14 pincode-text\">\n              Fastest delivery date, Try-at-Home availability,\n              Nearest store and In-store design!\n            </div>\n            <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n              [class.error-border]=\"pinError\">\n              <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n                class=\"w-75 p-0\">\n              <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n            </div>\n            <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n              Please enter a valid pincode\n            </div>\n          </div>\n        </ng-container>\n\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\n          <!-- User Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n          </svg>\n        </a>\n\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\n          <!-- User Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n          </svg>\n        </a>\n\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\n            Your Account\n          </div>\n          <div class=\"sub-text text-center f-14\">\n            Access account & manage your orders.\n          </div>\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n              [style.color]=\"style?.background?.color\">Sign Up</div>\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n          </div>\n        </div>\n\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\n          <!-- Heart Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path\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\">\n            </path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\n        </a>\n\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\n          <!-- Shopping Bag Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\n            <path d=\"M3 6h18\"></path>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\n        </a>\n\n        <a class=\"action-link icon-only icon-container bookings-icon\" (click)=\"goToBookings()\"\n          *ngIf=\"appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled\">\n          <!-- Bookings (calendar-check) Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"4\" y=\"7.5\" width=\"16\" height=\"12.5\" rx=\"2\"></rect>\n            <path d=\"M8 7.5V6a4 4 0 0 1 8 0v1.5\"></path>\n            <path d=\"M9.2 13.6l1.9 1.9 3.7-3.9\"></path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</span>\n        </a>\n\n        <div class=\"dropdown-search-expand\"\n          *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\n          <div class=\"dropdown-search-box\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"dropdown-search-icon search-btn\" (click)=\"searchProducts()\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n            <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\"\n              (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\n      <div class=\"search-bar\">\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n          (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n        </svg>\n      </div>\n    </div>\n\n  </header>\n</ng-template>\n\n<ng-template #fullScreenMenuTemplate>\n  <div class=\"fs-menu\">\n    <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\n    <div class=\"fs-menu-inner\">\n      <div class=\"fs-menu-head\">\n        <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\n          <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n        </div>\n        <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\n          <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\n        </button>\n      </div>\n      <!-- Main level -->\n      <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\n        <ng-container *ngFor=\"let item of footerMenu\">\n          <ng-container *ngIf=\"item.showHeader\">\n            <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\n              (click)=\"onFullScreenItemClick(item)\">\n              <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\n              <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n              <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\"\n                [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n            </a>\n          </ng-container>\n        </ng-container>\n      </nav>\n\n      <!-- Submenu (drill-in) level -->\n      <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\n        <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\n          <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n          <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\n        </button>\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n          <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\n            (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\n            <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n          </a>\n          <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\n            (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\n        </ng-container>\n      </nav>\n      <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\n        <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #bottomStickyNavTemplate>\n  <nav class=\"bs-nav\">\n    <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\n      <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\n        [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\n        <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\n          [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\n      </button>\n    </div>\n  </nav>\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}.pageLinks{width:100%!important;max-width:100%!important}}.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;width:100%;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-btn{cursor:pointer;flex-shrink:0}.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:100}.categories-wrapper .categories-header{border-top:1px solid rgba(0,0,0,.1)}.categories-header{gap:26px!important;overflow-x:auto;margin:8px 8px 0;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:8px;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}}.mega-menu-child-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.mega-menu-child-desc{font-size:11px;color:#999;margin-top:2px;line-height:1.3}\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", "itemIndex"] }, { 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: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.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", "isHeaderRenderer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
             type: Component,
@@ -17903,7 +18038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CountdownBannerComponent,
                         ContentFitDirective,
                         SociaIconsComponent,
-                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n    [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\n    <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\n      [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n      simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [class.dropdown-open]=\"showList\">\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n      <ng-container *ngIf=\"style?.headline?.display\">\n        <div>\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"style?.countdown?.display\">\n        <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\"\n          [isHeaderRenderer]=\"true\">\n        </simpo-countdown-banner>\n      </ng-container>\n\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n      </div>\n\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\n      </div>\n\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"style?.background?.color\">search</mat-icon>\n      </div> -->\n\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n      </ng-container>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n    </div>\n\n    <ng-container\n      *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n    </ng-container>\n  </div>\n\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n  </ng-container> -->\n\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\n    <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\n    <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\n  </ng-container>\n</section>\n\n<ng-template #header1Template>\n  <div class=\"header1\">\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </div>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header2Template>\n  <div class=\"header1\">\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header3Template>\n  <div class=\"header1\">\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </ng-container>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header4Template>\n  <div class=\"header1\">\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container> </ng-container>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b>{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\n    [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\n    (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n    <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\n      <div class=\"dropdown_menu_static w-100\"\n        (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\n        <div class=\"dd-nav-scroll\">\n          <div class=\"dd-nav\">\n            <ng-container *ngFor=\"let item of footerMenu\">\n              <ng-container *ngIf=\"item.showHeader\">\n                <div class=\"dd-tab-wrap\">\n                  <button type=\"button\" class=\"dd-tab\"\n                    [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\n                    (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\n                    <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n                      [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\n                    <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n                      viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n                      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n                        fill=\"#000000\" />\n                    </svg>\n                  </button>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n              style=\"display: block;\">\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-template #pageLinksDefault>\n      <div class=\"drawer-rows\">\n        <ng-container *ngFor=\"let item of footerMenu\">\n          <ng-container *ngIf=\"item.showHeader\">\n            <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\n              <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n              <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\n                [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-template>\n\n  </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <div class=\"d-flex\">\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n      <div *ngFor=\"let button of action?.buttons\">\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n      </div>\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n        (click)=\"navigateLogin()\" *ngIf=\"(passbookAppStatus || appointmentAppStatus) && !loggedIn\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\n        <mat-icon>person_outline</mat-icon>\n        Login\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn && !isMobile\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n  </div>\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\n    (click)=\"goToAccount('LOGIN')\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    &nbsp;\n    Login</button>\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\n    (click)=\"goToAccount('PROFILE')\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    &nbsp;Account</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\n      <div class=\"item-count fw-bold\">\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\n      </div>\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\n      </div>\n    </div>\n\n  </div>\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n    <div class=\"icons\" (click)=\"goToHome()\">\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Home</span>\n    </div>\n    <div class=\"icons\" (click)=\"searchProducts()\">\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Shop</span>\n    </div>\n    <div class=\"icons\" (click)=\"goToWishlist()\">\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\n    </div>\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Cart</span>\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n    </div> -->\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\n      <div class=\"input-group w-75 ml-2\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n          [style.color]=\"backgroundInfo?.accentColor\">\n        <!-- <span class=\"animated-placeholder position-absolute\" \n          [class.animate]=\"animatePlaceholder\"\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\n          {{ currentPlaceholder }}\n        </span> -->\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n      </div>\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n          height=\"30\" version=\"1.1\">\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n          </g>\n        </svg>\n        <div [style.color]=\"accentColor\">Schemes</div>\n      </div>\n    </div>\n    <div class=\"d-flex gap-3 align-items-center\">\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n        Pincode\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n        getPincode}}</div>\n\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your PIN Code unlocks\n        </div>\n        <div class=\"sub-text text-center f-14 pincode-text\">\n          Fastest delivery date, Try-at-Home availability,\n          Nearest store and In-store design!\n        </div>\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n          [class.error-border]=\"pinError\">\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n            class=\"w-75 p-0\">\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n        </div>\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n          Please enter a valid pincode\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n          {{getWishlistItemsCount}}</div>\n      </div>\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n          {{getCartItemsCount}}</div>\n      </div>\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n      </div>\n      <!-- (mouseleave)=\"showLogin = false\" -->\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your Account\n        </div>\n        <div class=\"sub-text text-center f-14\">\n          Access account & manage your orders.\n        </div>\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n            [style.color]=\"style?.background?.color\">Sign Up</div>\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n    <!-- <div> -->\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n    <!-- </div> -->\n  </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n    <ng-container *ngFor=\"let item of getNavbarButton\">\n      <ng-container *ngIf=\"item.showHeader\">\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n        <div class=\"position-relative\">\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n            {{link | uppercase}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\n  <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n    data-bs-backdrop=\"false\"\n    [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n\n    <!-- TOP BAR -->\n    <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\n      <div class=\"drawer-logo\">\n        <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n      </div>\n      <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\n        <mat-icon>chevron_left</mat-icon>\n      </button>\n    </div>\n\n    <!-- BODY -->\n    <div class=\"offcanvas-body drawer-body\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n    </div>\n\n    <!-- DIVIDER + QUICK ACTIONS -->\n    <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\n      <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\n      <div class=\"drawer-actions\">\n        <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ecomProfileTemplate>\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\n\n\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\n\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n    *ngIf=\"loggedIn\">\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n  </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b>{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n  <div class=\"categories-wrapper\" *ngIf=\"!isMobile\" (mouseleave)=\"showList = false; showCollections = false\">\n\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\n\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\n      [style.background]=\"data?.styles?.background?.color\">\n\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.background?.color\"\n        (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\n        {{ele?.label}}\n      </div>\n    </div>\n\n    <!-- [class.hide-dropdown]=\"!showList\" -->\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\n      <div class=\"row w-100 h-100 mega-menu-scroll-row\">\n        <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\n          <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\n              ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\n              ele?.children?.length > 0 && !last ? 'has-right-border' : ''\n            ]\">\n\n            <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\n              <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\n                <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\n                <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\n              </div>\n              <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\n                {{ele?.label | titlecase}}\n              </div>\n            </ng-container>\n\n            <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\n              *ngIf=\"ele?.children?.length > 0\">\n              {{ele?.label | titlecase}}\n            </div>\n            <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\n              <div class=\"d-flex flex-column gap-3 list-item\">\n                <ng-container *ngFor=\"let child of ele?.children\">\n                  <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer d-flex align-items-center gap-2\">\n                    <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\"\n                      class=\"mega-menu-child-logo\" />\n                    <div>\n                      <div>{{child?.label | titlecase}}</div>\n                      <div *ngIf=\"child?.description\" class=\"mega-menu-child-desc\">{{child?.description}}</div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #mobileMenuListTemplate>\n  <div class=\"mobile-menu-container\">\n\n    <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\n      <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\n        (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\n        [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\n        <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\n        <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\"\n          [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n      </div>\n    </div>\n\n    <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\n      <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\n        <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n        <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\n      </div>\n\n      <div class=\"drawer-detail-sections\">\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n          <div class=\"drawer-detail-section\">\n            <ng-container\n              *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\n              <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\n                *ngIf=\"child.imageUrl\">\n                <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\n                <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\n              <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\n                <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\" class=\"mega-menu-child-logo\" />\n                <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n              </div>\n\n              <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\n                <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\n                  data-bs-dismiss=\"offcanvas\">\n                  {{sub?.label | titlecase}}\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\n        <img [src]=\"ele?.imageUrls[0]\" [alt]=\"ele?.categoryName\" class=\"br-12 mobile-category-image\">\n      </div>\n      <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ecommerce_header>\n  <header class=\"site-header\" [ngClass]=\"{\n      'ecom-header1': style?.styling === 'Header1',\n      'ecom-header2': style?.styling === 'Header2',\n      'ecom-header3': style?.styling === 'Header3',\n      'ecom-header4': style?.styling === 'Header4'\n    }\">\n    <!-- Top Bar: Logo, Search, User Actions -->\n    <div class=\"top-bar\">\n\n      <!-- Mobile Menu Toggle -->\n      <div class=\"header-logo-area\" [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\n        <!-- HAMBURGER -->\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\" for=\"mobile-menu-checkbox\"\n          class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n          aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\" (click)=\"goBackMobileMenu()\">\n          <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n          </svg>\n          <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\n          </svg>\n        </label>\n        <!-- FULL SCREEN -->\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\" class=\"mobile-menu-btn\"\n          aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n          </svg>\n        </label>\n\n        <!-- Logo Section -->\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\n            [height]=\"content?.logo?.size\">\n        </a>\n\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n          && content?.logo?.text?.isText \n          && content?.logo?.text?.isIcon \n          && content?.logo?.text?.url\">\n\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\n\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\n            {{ content?.siteName?.value }}\n          </span>\n        </a>\n\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n          && content?.logo?.text?.isText \n          && !content?.logo?.text?.isIcon\">\n\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\n            {{ content?.siteName?.value }}\n          </span>\n        </a>\n      </div>\n\n      <!-- Search Bar -->\n      <div class=\"search-wrapper\"\n        *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\n        <div class=\"search-bar\">\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n            (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Dropdown menu style -->\n      <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\n        (mouseleave)=\"showList = false; selectedCategory = null\">\n        <div class=\"dd-nav-scroll\">\n          <div class=\"dd-nav\">\n            <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\n              <button type=\"button\" class=\"dd-tab\"\n                [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\n                (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\n                <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n                  [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\n                <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n                  viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n                    fill=\"#000000\" />\n                </svg>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n              style=\"display: block;\">\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n\n      <!-- Right Actions -->\n      <div class=\"user-actions\">\n\n        <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\n          <a class=\"action-link icon-only dropdown-search-toggle\"\n            (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n          </a>\n        </ng-container>\n\n        <ng-container *ngIf=\"storeAvaiable\">\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n            *ngIf=\"!getPincode\">\n            <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n              stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n              <path\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\"\n                fill=\"#000000\" />\n            </svg> -->\n\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\n              <g>\n                <path\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\">\n                </path>\n                <path\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\">\n                </path>\n              </g>\n            </svg>\n\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\n\n          </a>\n\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n            [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n              stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\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>\n              <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\n              <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\n              <path d=\"M2 7h20\"></path>\n              <path\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\">\n              </path>\n            </svg>\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\n              getPincode}}</span>\n\n          </a>\n\n          <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n            <div class=\"text text-center mb-2 f-18 fw-bold\">\n              Your PIN Code unlocks\n            </div>\n            <div class=\"sub-text text-center f-14 pincode-text\">\n              Fastest delivery date, Try-at-Home availability,\n              Nearest store and In-store design!\n            </div>\n            <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n              [class.error-border]=\"pinError\">\n              <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n                class=\"w-75 p-0\">\n              <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n            </div>\n            <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n              Please enter a valid pincode\n            </div>\n          </div>\n        </ng-container>\n\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\n          <!-- User Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n          </svg>\n        </a>\n\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\n          <!-- User Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n          </svg>\n        </a>\n\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\n            Your Account\n          </div>\n          <div class=\"sub-text text-center f-14\">\n            Access account & manage your orders.\n          </div>\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n              [style.color]=\"style?.background?.color\">Sign Up</div>\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n          </div>\n        </div>\n\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\n          <!-- Heart Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path\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\">\n            </path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\n        </a>\n\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\n          <!-- Shopping Bag Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\n            <path d=\"M3 6h18\"></path>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\n        </a>\n\n        <a class=\"action-link icon-only icon-container bookings-icon\" (click)=\"goToBookings()\"\n          *ngIf=\"appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled\">\n          <!-- Bookings (calendar-check) Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"4\" y=\"7.5\" width=\"16\" height=\"12.5\" rx=\"2\"></rect>\n            <path d=\"M8 7.5V6a4 4 0 0 1 8 0v1.5\"></path>\n            <path d=\"M9.2 13.6l1.9 1.9 3.7-3.9\"></path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</span>\n        </a>\n\n        <div class=\"dropdown-search-expand\"\n          *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\n          <div class=\"dropdown-search-box\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"dropdown-search-icon search-btn\" (click)=\"searchProducts()\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n            <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\"\n              (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\n      <div class=\"search-bar\">\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n          (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n        </svg>\n      </div>\n    </div>\n\n  </header>\n</ng-template>\n\n<ng-template #fullScreenMenuTemplate>\n  <div class=\"fs-menu\">\n    <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\n    <div class=\"fs-menu-inner\">\n      <div class=\"fs-menu-head\">\n        <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\n          <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n        </div>\n        <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\n          <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\n        </button>\n      </div>\n      <!-- Main level -->\n      <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\n        <ng-container *ngFor=\"let item of footerMenu\">\n          <ng-container *ngIf=\"item.showHeader\">\n            <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\n              (click)=\"onFullScreenItemClick(item)\">\n              <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\n              <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n              <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\"\n                [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n            </a>\n          </ng-container>\n        </ng-container>\n      </nav>\n\n      <!-- Submenu (drill-in) level -->\n      <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\n        <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\n          <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n          <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\n        </button>\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n          <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\n            (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\n            <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n          </a>\n          <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\n            (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\n        </ng-container>\n      </nav>\n      <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\n        <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #bottomStickyNavTemplate>\n  <nav class=\"bs-nav\">\n    <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\n      <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\n        [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\n        <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\n          [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\n      </button>\n    </div>\n  </nav>\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}.pageLinks{width:100%!important;max-width:100%!important}}.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;width:100%;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-btn{cursor:pointer;flex-shrink:0}.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:100}.categories-wrapper .categories-header{border-top:1px solid rgba(0,0,0,.1)}.categories-header{gap:26px!important;overflow-x:auto;margin:8px 8px 0;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:8px;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}}.mega-menu-child-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.mega-menu-child-desc{font-size:11px;color:#999;margin-top:2px;line-height:1.3}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n    [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\n    <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\n      [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n      simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [class.dropdown-open]=\"showList\">\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n      <ng-container *ngIf=\"style?.headline?.display\">\n        <div>\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"style?.countdown?.display\">\n        <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\"\n          [isHeaderRenderer]=\"true\">\n        </simpo-countdown-banner>\n      </ng-container>\n\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n      </div>\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n      </div>\n\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\n      </div>\n\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"style?.background?.color\">search</mat-icon>\n      </div> -->\n\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n      </ng-container>\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n      </div>\n    </div>\n\n    <ng-container\n      *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n    </ng-container>\n  </div>\n\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n  </ng-container> -->\n\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\n    <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\n    <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\n  </ng-container>\n</section>\n\n<ng-template #header1Template>\n  <div class=\"header1\">\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </div>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header2Template>\n  <div class=\"header1\">\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header3Template>\n  <div class=\"header1\">\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n    </ng-container>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #header4Template>\n  <div class=\"header1\">\n    <ng-container *ngIf=\"!isMobile\">\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container> </ng-container>\n    <!-- HAMBURGER -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n      data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <!-- FULL SCREEN -->\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n      </ng-container>\n    </div>\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b>{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\n    [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\n    (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n    <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\n      <div class=\"dropdown_menu_static w-100\"\n        (mouseenter)=\"cancelCloseDropdown()\" (mouseleave)=\"scheduleCloseDropdown()\">\n        <div class=\"dd-nav-scroll\">\n          <div class=\"dd-nav\">\n            <ng-container *ngFor=\"let item of footerMenu\">\n              <ng-container *ngIf=\"item.showHeader\">\n                <div class=\"dd-tab-wrap\">\n                  <button type=\"button\" class=\"dd-tab\"\n                    [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\n                    (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\n                    <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n                      [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\n                    <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n                      viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n                      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n                        fill=\"#000000\" />\n                    </svg>\n                  </button>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n              style=\"display: block;\">\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-template #pageLinksDefault>\n      <div class=\"drawer-rows\">\n        <ng-container *ngFor=\"let item of footerMenu\">\n          <ng-container *ngIf=\"item.showHeader\">\n            <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\n              <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n              <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\n                [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n    </ng-template>\n\n  </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <div class=\"d-flex\">\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n      <div *ngFor=\"let button of action?.buttons\">\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n      </div>\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n        (click)=\"navigateLogin()\" *ngIf=\"(passbookAppStatus || appointmentAppStatus) && !loggedIn\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\n        <mat-icon>person_outline</mat-icon>\n        Login\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn && !isMobile\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n  </div>\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\n    (click)=\"goToAccount('LOGIN')\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    &nbsp;\n    Login</button>\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\n    (click)=\"goToAccount('PROFILE')\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path\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\"\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    &nbsp;Account</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\n      <div class=\"item-count fw-bold\">\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\n      </div>\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\n      </div>\n    </div>\n\n  </div>\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n    <div class=\"icons\" (click)=\"goToHome()\">\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Home</span>\n    </div>\n    <div class=\"icons\" (click)=\"searchProducts()\">\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Shop</span>\n    </div>\n    <div class=\"icons\" (click)=\"goToWishlist()\">\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\n    </div>\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n      <span [simpoColor]=\"simpoColor\">Cart</span>\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n    </div> -->\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\n      <div class=\"input-group w-75 ml-2\">\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n          [style.color]=\"backgroundInfo?.accentColor\">\n        <!-- <span class=\"animated-placeholder position-absolute\" \n          [class.animate]=\"animatePlaceholder\"\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\n          {{ currentPlaceholder }}\n        </span> -->\n        <mat-icon class=\"h-100\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n      </div>\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n          height=\"30\" version=\"1.1\">\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path\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\"\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n              stroke-opacity=\"1\" />\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\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n          </g>\n        </svg>\n        <div [style.color]=\"accentColor\">Schemes</div>\n      </div>\n    </div>\n    <div class=\"d-flex gap-3 align-items-center\">\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n        Pincode\n      </div>\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n        getPincode}}</div>\n\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your PIN Code unlocks\n        </div>\n        <div class=\"sub-text text-center f-14 pincode-text\">\n          Fastest delivery date, Try-at-Home availability,\n          Nearest store and In-store design!\n        </div>\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n          [class.error-border]=\"pinError\">\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n            class=\"w-75 p-0\">\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n        </div>\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n          Please enter a valid pincode\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n          {{getWishlistItemsCount}}</div>\n      </div>\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n          {{getCartItemsCount}}</div>\n      </div>\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\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\"\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n      </div>\n      <!-- (mouseleave)=\"showLogin = false\" -->\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\n          Your Account\n        </div>\n        <div class=\"sub-text text-center f-14\">\n          Access account & manage your orders.\n        </div>\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n            [style.color]=\"style?.background?.color\">Sign Up</div>\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n        </div>\n      </div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n        *ngIf=\"loggedIn\">\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n      </div>\n    </div>\n    <!-- <div> -->\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n    <!-- </div> -->\n  </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n    <ng-container *ngFor=\"let item of getNavbarButton\">\n      <ng-container *ngIf=\"item.showHeader\">\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n        <div class=\"position-relative\">\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n            {{link | uppercase}}\n          </button>\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\n  <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n    data-bs-backdrop=\"false\"\n    [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n\n    <!-- TOP BAR -->\n    <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\n      <div class=\"drawer-logo\">\n        <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n      </div>\n      <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\n        <mat-icon>chevron_left</mat-icon>\n      </button>\n    </div>\n\n    <!-- BODY -->\n    <div class=\"offcanvas-body drawer-body\">\n      <ng-container *ngIf=\"isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n      </ng-container>\n    </div>\n\n    <!-- DIVIDER + QUICK ACTIONS -->\n    <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\n      <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\n      <div class=\"drawer-actions\">\n        <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ecomProfileTemplate>\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\n\n\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\n\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n    *ngIf=\"loggedIn\">\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n  </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n    </div>\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n      <b>{{content?.siteName?.value}}</b>\n    </div>\n  </div>\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n  <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n  <div class=\"categories-wrapper\" *ngIf=\"!isMobile\" (mouseleave)=\"showList = false; showCollections = false\">\n\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\n\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\n      [style.background]=\"data?.styles?.background?.color\">\n\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.background?.color\"\n        (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\n        {{ele?.label}}\n      </div>\n    </div>\n\n    <!-- [class.hide-dropdown]=\"!showList\" -->\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\n      <div class=\"row w-100 h-100 mega-menu-scroll-row\">\n        <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\n          <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\n              ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\n              ele?.children?.length > 0 && !last ? 'has-right-border' : ''\n            ]\">\n\n            <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\n              <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\n                <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\n                <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\n              </div>\n              <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\n                {{ele?.label | titlecase}}\n              </div>\n            </ng-container>\n\n            <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\n              *ngIf=\"ele?.children?.length > 0\">\n              {{ele?.label | titlecase}}\n            </div>\n            <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\n              <div class=\"d-flex flex-column gap-3 list-item\">\n                <ng-container *ngFor=\"let child of ele?.children\">\n                  <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer d-flex align-items-center gap-2\">\n                    <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\"\n                      class=\"mega-menu-child-logo\" />\n                    <div>\n                      <div>{{child?.label | titlecase}}</div>\n                      <div *ngIf=\"child?.description\" class=\"mega-menu-child-desc\">{{child?.description}}</div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #mobileMenuListTemplate>\n  <div class=\"mobile-menu-container\">\n\n    <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\n      <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\n        (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\n        [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\n        <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\n        <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\"\n          [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n      </div>\n    </div>\n\n    <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\n      <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\n        <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n        <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\n      </div>\n\n      <div class=\"drawer-detail-sections\">\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n          <div class=\"drawer-detail-section\">\n            <ng-container\n              *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\n              <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\n                *ngIf=\"child.imageUrl\">\n                <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\n                <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\n              </div>\n            </ng-container>\n\n            <ng-container\n              *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\n              <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\n                <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\" class=\"mega-menu-child-logo\" />\n                <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n              </div>\n\n              <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\n                <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\n                  data-bs-dismiss=\"offcanvas\">\n                  {{sub?.label | titlecase}}\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n  </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\n        <img [src]=\"ele?.imageUrls[0]\" [alt]=\"ele?.categoryName\" class=\"br-12 mobile-category-image\">\n      </div>\n      <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ecommerce_header>\n  <header class=\"site-header\" [ngClass]=\"{\n      'ecom-header1': style?.styling === 'Header1',\n      'ecom-header2': style?.styling === 'Header2',\n      'ecom-header3': style?.styling === 'Header3',\n      'ecom-header4': style?.styling === 'Header4'\n    }\">\n    <!-- Top Bar: Logo, Search, User Actions -->\n    <div class=\"top-bar\">\n\n      <!-- Mobile Menu Toggle -->\n      <div class=\"header-logo-area\" [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\n        <!-- HAMBURGER -->\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\" for=\"mobile-menu-checkbox\"\n          class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n          aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\" (click)=\"goBackMobileMenu()\">\n          <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n          </svg>\n          <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\n          </svg>\n        </label>\n        <!-- FULL SCREEN -->\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\" class=\"mobile-menu-btn\"\n          aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n          </svg>\n        </label>\n\n        <!-- Logo Section -->\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\n            [height]=\"content?.logo?.size\">\n        </a>\n\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n          && content?.logo?.text?.isText \n          && content?.logo?.text?.isIcon \n          && content?.logo?.text?.url\">\n\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\n\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\n            {{ content?.siteName?.value }}\n          </span>\n        </a>\n\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n          && content?.logo?.text?.isText \n          && !content?.logo?.text?.isIcon\">\n\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\n            {{ content?.siteName?.value }}\n          </span>\n        </a>\n      </div>\n\n      <!-- Search Bar -->\n      <div class=\"search-wrapper\"\n        *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\n        <div class=\"search-bar\">\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n            (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n          </svg>\n        </div>\n      </div>\n\n      <!-- Dropdown menu style -->\n      <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\n        (mouseenter)=\"cancelCloseDropdown()\" (mouseleave)=\"scheduleCloseDropdown()\">\n        <div class=\"dd-nav-scroll\">\n          <div class=\"dd-nav\">\n            <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\n              <button type=\"button\" class=\"dd-tab\"\n                [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\n                (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\n                <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n                  [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\n                <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n                  viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n                    fill=\"#000000\" />\n                </svg>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n              style=\"display: block;\">\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n\n      <!-- Right Actions -->\n      <div class=\"user-actions\">\n\n        <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\n          <a class=\"action-link icon-only dropdown-search-toggle\"\n            (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n          </a>\n        </ng-container>\n\n        <ng-container *ngIf=\"storeAvaiable\">\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n            *ngIf=\"!getPincode\">\n            <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n              stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n              <path\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\"\n                fill=\"#000000\" />\n            </svg> -->\n\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\n              <g>\n                <path\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\">\n                </path>\n                <path\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\">\n                </path>\n              </g>\n            </svg>\n\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\n\n          </a>\n\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n            [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n              stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\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>\n              <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\n              <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\n              <path d=\"M2 7h20\"></path>\n              <path\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\">\n              </path>\n            </svg>\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\n              getPincode}}</span>\n\n          </a>\n\n          <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n            <div class=\"text text-center mb-2 f-18 fw-bold\">\n              Your PIN Code unlocks\n            </div>\n            <div class=\"sub-text text-center f-14 pincode-text\">\n              Fastest delivery date, Try-at-Home availability,\n              Nearest store and In-store design!\n            </div>\n            <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n              [class.error-border]=\"pinError\">\n              <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n                class=\"w-75 p-0\">\n              <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n            </div>\n            <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n              Please enter a valid pincode\n            </div>\n          </div>\n        </ng-container>\n\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\n          <!-- User Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n          </svg>\n        </a>\n\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\n          <!-- User Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n          </svg>\n        </a>\n\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\n            Your Account\n          </div>\n          <div class=\"sub-text text-center f-14\">\n            Access account & manage your orders.\n          </div>\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n              [style.color]=\"style?.background?.color\">Sign Up</div>\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n          </div>\n        </div>\n\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\n          <!-- Heart Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path\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\">\n            </path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\n        </a>\n\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\n          <!-- Shopping Bag Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\n            <path d=\"M3 6h18\"></path>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\n        </a>\n\n        <a class=\"action-link icon-only icon-container bookings-icon\" (click)=\"goToBookings()\"\n          *ngIf=\"appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled\">\n          <!-- Bookings (calendar-check) Icon SVG -->\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"4\" y=\"7.5\" width=\"16\" height=\"12.5\" rx=\"2\"></rect>\n            <path d=\"M8 7.5V6a4 4 0 0 1 8 0v1.5\"></path>\n            <path d=\"M9.2 13.6l1.9 1.9 3.7-3.9\"></path>\n          </svg>\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n            *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</span>\n        </a>\n\n        <div class=\"dropdown-search-expand\"\n          *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\n          <div class=\"dropdown-search-box\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"dropdown-search-icon search-btn\" (click)=\"searchProducts()\">\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n            </svg>\n            <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\"\n              (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\n      <div class=\"search-bar\">\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n          (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n        </svg>\n      </div>\n    </div>\n\n  </header>\n</ng-template>\n\n<ng-template #fullScreenMenuTemplate>\n  <div class=\"fs-menu\">\n    <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\n    <div class=\"fs-menu-inner\">\n      <div class=\"fs-menu-head\">\n        <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\n          <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n        </div>\n        <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\n          <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\n        </button>\n      </div>\n      <!-- Main level -->\n      <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\n        <ng-container *ngFor=\"let item of footerMenu\">\n          <ng-container *ngIf=\"item.showHeader\">\n            <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\n              (click)=\"onFullScreenItemClick(item)\">\n              <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\n              <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n              <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\"\n                [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n            </a>\n          </ng-container>\n        </ng-container>\n      </nav>\n\n      <!-- Submenu (drill-in) level -->\n      <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\n        <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\n          <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n          <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\n        </button>\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n          <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\n            (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\n            <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n          </a>\n          <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\n            (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\n        </ng-container>\n      </nav>\n      <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\n        <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #bottomStickyNavTemplate>\n  <nav class=\"bs-nav\">\n    <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\n      <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\n        [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\n        <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\n          [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\n      </button>\n    </div>\n  </nav>\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}.pageLinks{width:100%!important;max-width:100%!important}}.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;width:100%;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-btn{cursor:pointer;flex-shrink:0}.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:100}.categories-wrapper .categories-header{border-top:1px solid rgba(0,0,0,.1)}.categories-header{gap:26px!important;overflow-x:auto;margin:8px 8px 0;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:8px;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}}.mega-menu-child-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.mega-menu-child-desc{font-size:11px;color:#999;margin-top:2px;line-height:1.3}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i3$2.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCAL_STORAGE]
@@ -19034,8 +19169,9 @@ class CategoriesWithImageBackgroundColumnsComponent {
         // console.log(this.responseData);
     }
     redirectToListPage(category) {
-        // category = category.categoryName?.replaceAll(" ", "_");
-        this.router.navigate(['/list'], { queryParams: { category: category, pageNo: 1 } });
+        // Featured collections reuse this component with collection rows (they carry `collectionId`).
+        const target = category?.collectionId ? { collection: category } : { category };
+        this.router.navigate(listPath(target), { queryParams: { pageNo: 1 } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CategoriesWithImageBackgroundColumnsComponent, deps: [{ token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CategoriesWithImageBackgroundColumnsComponent, isStandalone: true, selector: "simpo-categories-with-image-background-columns", inputs: { responseData: "responseData", styles: "styles", content: "content" }, ngImport: i0, template: "<div class=\"grid pb-3 mt-3\">\n\n    <!-- Card 1: Winter Luxe -->\n    <ng-container *ngFor=\"let category of responseData; let i = index\">\n        <div class=\"card card--1 border-0\" [simpoCorner]=\"styles?.corners\" (click)=\"redirectToListPage(category)\"\n            (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n\n            <img class=\"card__img\"\n                [src]=\"category.imgUrl[0] ?category.imgUrl[0] : 'https://d2z9497xp8xb12.cloudfront.net/prod-images/856980c17752829234967351_- No Photos.jpg'\"\n                [alt]=\"category.categoryName\" />\n            <div class=\"card__overlay\"></div>\n            <div class=\"card__content\">\n                <span class=\"card__label\"\n                    *ngIf=\"hoveredIndex !== i && content?.display?.showHeading\">{{category.categoryName}}</span>\n                <div class=\"card__detail w-100 d-flex justify-content-start flex-column\" *ngIf=\"hoveredIndex === i\">\n                    <div class=\"card__title w-100 d-flex justify-content-start\">{{category.categoryName.length > 23 ?\n                        category.categoryName.slice(0, 23) + '...' : category.categoryName }}</div>\n                    <div class=\"card__desc w-100 d-flex justify-content-start\">{{category.description.length > 60 ?\n                        category.description.slice(0, 60) + '...' : category.description}}</div>\n                    <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n\n    <!-- <div class=\"card card--2\">\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1529139574466-a303027c1d8b?w=700&q=80\"\n            alt=\"Bold Statements\" />\n        <div class=\"card__overlay\"></div>\n        <div class=\"card__content\">\n            <span class=\"card__label\">Bold Statements</span>\n            <div class=\"card__detail\">\n                <div class=\"card__title\">Bold Statements</div>\n                <div class=\"card__desc\">Eye-catching pieces that demand attention</div>\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"card card--3\">\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=600&q=80\"\n            alt=\"Alpine Layers\" />\n        <div class=\"card__overlay\"></div>\n        <div class=\"card__content\">\n            <span class=\"card__label\">Alpine Layers</span>\n            <div class=\"card__detail\">\n                <div class=\"card__title\">Alpine Layers</div>\n                <div class=\"card__desc\">Cozy textures for mountain escapes</div>\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"card card--4\">\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=600&q=80\"\n            alt=\"Resort Looks\" />\n        <div class=\"card__overlay\"></div>\n        <div class=\"card__content\">\n            <span class=\"card__label\">Resort Looks</span>\n            <div class=\"card__detail\">\n                <div class=\"card__title\">Resort Looks</div>\n                <div class=\"card__desc\">Effortless style under the sun</div>\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"card card--5\">\n        <img class=\"card__img\" src=\"https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=600&q=80\"\n            alt=\"Everyday Cool\" />\n        <div class=\"card__overlay\"></div>\n        <div class=\"card__content\">\n            <span class=\"card__label\">Everyday Cool</span>\n            <div class=\"card__detail\">\n                <div class=\"card__title\">Everyday Cool</div>\n                <div class=\"card__desc\">Street-ready looks for daily life</div>\n                <a href=\"#\" class=\"card__cta\">Shop Now <span class=\"arrow\">\u2192</span></a>\n            </div>\n        </div>\n    </div> -->\n\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.grid{display:flex;gap:12px;align-items:stretch;width:100%;overflow-x:scroll}.card{position:relative;overflow:hidden;cursor:pointer;flex-shrink:0;width:180px;height:530px;transition:width .55s cubic-bezier(.4,0,.2,1),flex .55s cubic-bezier(.4,0,.2,1)}.card:hover{width:420px}.card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .65s cubic-bezier(.4,0,.2,1)}.card:hover .card__img{transform:scale(1.05)}.card__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0000 30%,#000000b8);transition:background .4s ease}.card:hover .card__overlay{background:linear-gradient(to bottom,#00000014,#000000c7)}.card__content{position:absolute;bottom:0;left:0;right:0;padding:28px 22px;display:flex;flex-direction:column;gap:8px}.card__label{font-size:17px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-start;transition:opacity .35s ease,transform .45s cubic-bezier(.4,0,.2,1)}.card:hover .card__label{opacity:0;transform:rotate(180deg) translateY(10px)}.card__detail{opacity:0;transform:translateY(18px);transition:opacity .4s ease .15s,transform .45s cubic-bezier(.4,0,.2,1) .15s;pointer-events:none}.card:hover .card__detail{opacity:1;transform:translateY(0);pointer-events:auto}.card__title{font-size:26px;font-weight:700;color:#fff;line-height:1.2;white-space:nowrap}.card__desc{font-size:13.5px;font-weight:300;color:#ffffffc7;line-height:1.5;margin-top:4px;white-space:nowrap}.card__cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:500;letter-spacing:.04em;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px;width:fit-content;transition:gap .25s ease,border-color .25s ease}.card__cta:hover{gap:14px;border-color:#fff}.card__cta .arrow{font-size:16px;transition:transform .25s ease}.card__cta:hover .arrow{transform:translate(4px)}.card--1 .card__img{filter:brightness(.95)}.card--2{width:320px}.card--2:hover{width:480px}.card--3 .card__img{filter:brightness(1.02)}@media (max-width: 900px){.grid{gap:8px}.card{width:140px;height:440px}.card:hover{width:320px}.card--2{width:240px}.card--2:hover{width:360px}.card__title{font-size:20px}}@media (max-width: 600px){.grid{flex-wrap:nowrap;overflow-x:auto;gap:8px}.card{width:110px;height:360px;flex-shrink:0}.card:hover{width:240px}.card--2{width:180px}.card--2:hover{width:280px}}\n"], dependencies: [{ kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
@@ -19134,8 +19270,7 @@ class FeaturedCategoryComponent extends BaseSection {
         return [0, (this.styles?.maximumProduct || 0)];
     }
     redirectToListPage(category) {
-        category = category.categoryName?.replaceAll(" ", "_");
-        this.router.navigate(['/list'], { queryParams: { category: category } });
+        this.router.navigate(listPath({ category }));
     }
     getAllCategoriesByCollectionId() {
         if (!this.data?.content.collectionId)
@@ -19172,7 +19307,7 @@ class FeaturedCategoryComponent extends BaseSection {
         return this.styles?.layout?.align || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$2.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "categoryParent", first: true, predicate: ["categoryParent1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\n      <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\n        [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\n          [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\n          [simpoAnimation]=\"styles?.animation\">\n          <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n            <ng-container *ngIf=\"edit || item.value\">\n              <div class=\"pt-3 w-100\">\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n              </div>\n            </ng-container>\n            <!-- </div> -->\n          </div>\n          <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\n            <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\n              [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\n              [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\n              <div\n                *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                (click)=\"redirectToListPage(data.categoryName)\" class=\"d-flex flex-column align-items-center w-fit-content\"\n                [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\n                <img  [simpoCorner]=\"styles?.corners\"\n                  [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\n                  onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\n                <div *ngIf=\"content?.display?.showHeading\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\n                <!-- class=\"category-name body-large\"  -->\n              </div>\n            </div>\n          </ng-container>\n          <ng-template #categoryStyle2>\n            <div class=\"w-100\">\n              <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\n                [content]=\"content\"></simpo-categories-with-image-background-columns>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\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: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "categoryParent", first: true, predicate: ["categoryParent1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\n      <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\n        [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\n          [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\n          [simpoAnimation]=\"styles?.animation\">\n          <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n            <ng-container *ngIf=\"edit || item.value\">\n              <div class=\"pt-3 w-100\">\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n              </div>\n            </ng-container>\n            <!-- </div> -->\n          </div>\n          <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\n            <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\n              [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\n              [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\n              <div\n                *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\n                [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\n                <img  [simpoCorner]=\"styles?.corners\"\n                  [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\n                  onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\n                <div *ngIf=\"content?.display?.showHeading\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\n                <!-- class=\"category-name body-large\"  -->\n              </div>\n            </div>\n          </ng-container>\n          <ng-template #categoryStyle2>\n            <div class=\"w-100\">\n              <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\n                [content]=\"content\"></simpo-categories-with-image-background-columns>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\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: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "component", type: CategoriesWithImageBackgroundColumnsComponent, selector: "simpo-categories-with-image-background-columns", inputs: ["responseData", "styles", "content"] }] }); }
 }
@@ -19192,7 +19327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         OverlayDirective,
                         SvgDividerComponent,
                         TextEditorComponent,
-                        SpacingAroundDirective, CategoriesWithImageBackgroundColumnsComponent], template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\n      <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\n        [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\n          [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\n          [simpoAnimation]=\"styles?.animation\">\n          <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n            <ng-container *ngIf=\"edit || item.value\">\n              <div class=\"pt-3 w-100\">\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n              </div>\n            </ng-container>\n            <!-- </div> -->\n          </div>\n          <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\n            <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\n              [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\n              [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\n              <div\n                *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                (click)=\"redirectToListPage(data.categoryName)\" class=\"d-flex flex-column align-items-center w-fit-content\"\n                [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\n                <img  [simpoCorner]=\"styles?.corners\"\n                  [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\n                  onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\n                <div *ngIf=\"content?.display?.showHeading\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\n                <!-- class=\"category-name body-large\"  -->\n              </div>\n            </div>\n          </ng-container>\n          <ng-template #categoryStyle2>\n            <div class=\"w-100\">\n              <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\n                [content]=\"content\"></simpo-categories-with-image-background-columns>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+                        SpacingAroundDirective, CategoriesWithImageBackgroundColumnsComponent], template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\n      <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\n        [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\n          [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\n          [simpoAnimation]=\"styles?.animation\">\n          <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n            <ng-container *ngIf=\"edit || item.value\">\n              <div class=\"pt-3 w-100\">\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n              </div>\n            </ng-container>\n            <!-- </div> -->\n          </div>\n          <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\n            <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\n              [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\n              [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\n              <div\n                *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\n                [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\n                <img  [simpoCorner]=\"styles?.corners\"\n                  [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\n                  onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\n                <div *ngIf=\"content?.display?.showHeading\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\n                <!-- class=\"category-name body-large\"  -->\n              </div>\n            </div>\n          </ng-container>\n          <ng-template #categoryStyle2>\n            <div class=\"w-100\">\n              <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\n                [content]=\"content\"></simpo-categories-with-image-background-columns>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -19708,6 +19843,19 @@ class ProductDescComponent extends BaseSection {
             }
         });
     }
+    // Item custom field values, keyed by field identifier. The label is derived from the identifier
+    // because the storefront has no field-definition endpoint to read the display name from.
+    get customFieldSpecs() {
+        return Object.entries(this.responseData?.customFieldValues ?? {})
+            .map(([identifier, raw]) => ({
+            label: identifier
+                .replace(/[_-]+/g, ' ')
+                .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+                .replace(/\b\w/g, (c) => c.toUpperCase()),
+            value: Array.isArray(raw) ? raw.join(', ') : raw === null || raw === undefined ? '' : String(raw).trim()
+        }))
+            .filter((spec) => spec.value !== '');
+    }
     getRelatedProducts() {
         const userDetails = this.storageService.getUser();
         if (!!userDetails) {
@@ -19873,9 +20021,9 @@ class ProductDescComponent extends BaseSection {
             this.cartService.addItemToCart(this.responseData);
         }
     }
+    // A product only carries the category name, so the slug is derived from it.
     goToFilter(category) {
-        category = category.replaceAll(" ", "_");
-        this.router.navigate(['list'], { queryParams: { category: category } });
+        this.router.navigate(listPath({ category }));
     }
     addToFavourite() {
         this.isItemAsFavorite = true;
@@ -20281,7 +20429,7 @@ class ProductDescComponent extends BaseSection {
         return currentDate;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1.Meta }, { token: i1.Title }, { token: i8$1.MatBottomSheet }, { token: i0.Renderer2 }, { token: i3$2.MatDialog }, { token: AnalyticsService }, { token: BookingProductCartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div> -->\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n      [simpoLayout]=\"styles?.layout\" #container>\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div> -->\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n          <div class=\"product-hero-card-modern\">\n            <ng-container *ngIf=\"isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n            </ng-container>\n          </div>\n\n\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <!-- Moved descriptors to Details tab below -->\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <!-- Moved tags to Details tab below -->\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <!-- Tabs Navigation -->\n      <div class=\"product-tabs-container\">\n        <ul class=\"tabs-list\">\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Details')\">Details</li>\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Reviews')\">Reviews</li>\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n        </ul>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content-pane\">\n        <div *ngIf=\"activeTab == 'Details'\">\n          <!-- Integrated descriptors and tags here -->\n          <div class=\"mt-2\">\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"activeTab == 'Reviews'\">\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n        </div>\n\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\n          <div class=\"pb-glass-container mt-2\">\n\n            <!-- One card per material \u2014 generic, works for any material type -->\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\n              <div class=\"pb-glass-card\">\n                <div class=\"pb-glass-header\"\n                     [style.background]=\"styles?.background?.accentColor\"\n                     [style.color]=\"'#fff'\">\n                  {{ ele?.materialName | titlecase }}\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Purity</span>\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Net Weight</span>\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Value</span>\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- Making Charges card -->\n            <div class=\"pb-glass-card\">\n              <div class=\"pb-glass-header\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                Making Charges\n              </div>\n              <!-- <div class=\"pb-glass-row\">\n                <span class=\"pb-label\">Net Weight</span>\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n              </div> -->\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\n                <span class=\"pb-label\">Making Charge %</span>\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n              </div>\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n                <span class=\"pb-label\">Value</span>\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n            <!-- Summary card -->\n            <div class=\"pb-summary-card\">\n              <div class=\"pb-summary-row\">\n                <span>Total Value</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-summary-row\">\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-grand-total\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                <span>TOTAL</span>\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </section>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n          message</mat-icon>Notify Me</button>\n    </div>\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-3\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-semibold\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"product-info-minimal\">\n    <!-- Brand -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\n      <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\n    </div>\n\n    <!-- Item Code -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n    </div>\n\n    <!-- Title and Price Row -->\n    <div class=\"title-price-row-modern\">\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n      <div class=\"product-price-modern\">\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n          number:'1.0-0'}}\n      </div>\n    </div>\n\n    <!-- Rating Row -->\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n      <span class=\"separator\">|</span>\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n        {{responseData?.totalReviewCount}} reviews</span>\n    </div>\n\n    <!-- Brief Description -->\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc mt-2\">\n    <div>\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n          [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div> -->\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n          [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele?.materialName | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/{{ele?.unit | titlecase}}\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.purity |\n                    titlecase}}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container> -->\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\n      <div class=\"main-image-container p-0\">\n        <div class=\"item-img rounded-3\">\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n          </lib-ngx-image-zoom>\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n            class=\"w-100 h-100 object-fit-cover\">\n        </div>\n      </div>\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"bento-masonry-container\">\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n      </div>\n    </div>\n  </ng-container>\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n          Schedule a Video Call\n        </button>\n        <ng-container *ngIf=\"videoCallAdded\">\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n            <mat-icon>check_circle</mat-icon>\n            <span>Added to your Video Call request</span>\n          </div>\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n            Booking</button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section mb-2\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n            style=\"width: 100%;\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon d-flex align-items-center\">\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n            </svg>\n          </span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            expected Order will\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n  <!-- Try At Home Section -->\n  <div class=\"try-home-section\">\n    <div class=\"d-flex align-items-start try-home-item\">\n      <span class=\"home-icon d-flex align-items-center\">\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n        </svg>\n      </span>\n      <div class=\"try-home-details\">\n        <div class=\"try-home-header\">\n          <span class=\"try-home-text\">Try At Home</span>\n          <span class=\"free-text\"> (It's Free)</span>\n        </div>\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n        <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n      </div>\n    </div>\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n        HOME</button>\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n        Booking</button>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n  <!-- Nearest Store Section -->\n  <ng-container\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n    <div class=\"store-section\">\n      <div class=\"d-flex align-items-center store-item\">\n        <span class=\"store-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <div class=\"store-details\">\n          <div class=\"store-text\">\n            <span class=\"store-label\">Nearest Store - </span>\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\n          </div>\n          <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n          <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-center w-100\">\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n          STORE</button>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #emptyStore>\n    <div class=\"delivery-section\">\n      <div class=\"d-flex align-items-center\">\n        <span class=\"delivery-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <span class=\"delivery-text\">No Stores are available</span>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n    <!-- Header: Title + Average | Bar Chart -->\n    <div class=\"rv-header\">\n      <div class=\"rv-header-left\">\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\n        <div class=\"rv-average-row\">\n          <!-- filled stars -->\n          <div class=\"rv-stars\">\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                  fill=\"#eab308\" />\n              </svg>\n            </ng-container>\n          </div>\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n          <span class=\"rv-avg-label\">average</span>\n        </div>\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n          {{responseData?.totalReviewCount | number}} Reviews\n        </div>\n      </div>\n\n      <div class=\"rv-bars\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"rv-bar-row\">\n            <span class=\"rv-bar-label\">{{rating}}</span>\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                fill=\"#eab308\" />\n            </svg>\n            <div class=\"rv-bar-track\">\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Review Cards Grid -->\n    <div class=\"rv-grid\">\n      <ng-container *ngFor=\"let review of reviewsData\">\n        <ng-container *ngIf=\"review.review\">\n          <div class=\"rv-card\">\n            <div class=\"rv-card-top\">\n              <div class=\"rv-reviewer\">\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n                  class=\"rv-avatar\" alt=\"\">\n                <div class=\"rv-name-date\">\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n                </div>\n              </div>\n              <!-- Star rating -->\n              <div class=\"rv-card-stars\">\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                </ng-container>\n              </div>\n            </div>\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n            <!-- Review Images -->\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n              </a>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\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: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i17.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "isBrowseProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div> -->\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n      [simpoLayout]=\"styles?.layout\" #container>\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div> -->\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n          <div class=\"product-hero-card-modern\">\n            <ng-container *ngIf=\"isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n            </ng-container>\n          </div>\n\n\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <!-- Moved descriptors to Details tab below -->\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <!-- Moved tags to Details tab below -->\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <!-- Tabs Navigation -->\n      <div class=\"product-tabs-container\">\n        <ul class=\"tabs-list\">\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Details')\">Details</li>\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Reviews')\">Reviews</li>\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n        </ul>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content-pane\">\n        <div *ngIf=\"activeTab == 'Details'\">\n          <!-- Integrated descriptors and tags here -->\n          <div class=\"mt-2\">\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"activeTab == 'Reviews'\">\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n        </div>\n\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\n          <div class=\"pb-glass-container mt-2\">\n\n            <!-- One card per material \u2014 generic, works for any material type -->\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\n              <div class=\"pb-glass-card\">\n                <div class=\"pb-glass-header\"\n                     [style.background]=\"styles?.background?.accentColor\"\n                     [style.color]=\"'#fff'\">\n                  {{ ele?.materialName | titlecase }}\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Purity</span>\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Net Weight</span>\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Value</span>\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- Making Charges card -->\n            <div class=\"pb-glass-card\">\n              <div class=\"pb-glass-header\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                Making Charges\n              </div>\n              <!-- <div class=\"pb-glass-row\">\n                <span class=\"pb-label\">Net Weight</span>\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n              </div> -->\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\n                <span class=\"pb-label\">Making Charge %</span>\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n              </div>\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n                <span class=\"pb-label\">Value</span>\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n            <!-- Summary card -->\n            <div class=\"pb-summary-card\">\n              <div class=\"pb-summary-row\">\n                <span>Total Value</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-summary-row\">\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-grand-total\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                <span>TOTAL</span>\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </section>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n          message</mat-icon>Notify Me</button>\n    </div>\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-3\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-semibold\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"product-info-minimal\">\n    <!-- Brand -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\n      <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\n    </div>\n\n    <!-- Item Code -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n    </div>\n\n    <!-- Title and Price Row -->\n    <div class=\"title-price-row-modern\">\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n      <div class=\"product-price-modern\">\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n          number:'1.0-0'}}\n      </div>\n    </div>\n\n    <!-- Rating Row -->\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n      <span class=\"separator\">|</span>\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n        {{responseData?.totalReviewCount}} reviews</span>\n    </div>\n\n    <!-- Brief Description -->\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc mt-2\">\n    <div>\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n          [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div> -->\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n          [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <div class=\"custom-specifications\" *ngIf=\"customFieldSpecs.length\">\n        <div class=\"body-large spec-title\">Specifications</div>\n        <table class=\"spec-table\">\n          <tbody>\n            <tr *ngFor=\"let spec of customFieldSpecs\">\n              <th scope=\"row\">{{ spec.label }}</th>\n              <td>{{ spec.value }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele?.materialName | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/{{ele?.unit | titlecase}}\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.purity |\n                    titlecase}}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container> -->\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\n      <div class=\"main-image-container p-0\">\n        <div class=\"item-img rounded-3\">\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n          </lib-ngx-image-zoom>\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n            class=\"w-100 h-100 object-fit-cover\">\n        </div>\n      </div>\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"bento-masonry-container\">\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n      </div>\n    </div>\n  </ng-container>\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n          Schedule a Video Call\n        </button>\n        <ng-container *ngIf=\"videoCallAdded\">\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n            <mat-icon>check_circle</mat-icon>\n            <span>Added to your Video Call request</span>\n          </div>\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n            Booking</button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section mb-2\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n            style=\"width: 100%;\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon d-flex align-items-center\">\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n            </svg>\n          </span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            expected Order will\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n  <!-- Try At Home Section -->\n  <div class=\"try-home-section\">\n    <div class=\"d-flex align-items-start try-home-item\">\n      <span class=\"home-icon d-flex align-items-center\">\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n        </svg>\n      </span>\n      <div class=\"try-home-details\">\n        <div class=\"try-home-header\">\n          <span class=\"try-home-text\">Try At Home</span>\n          <span class=\"free-text\"> (It's Free)</span>\n        </div>\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n        <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n      </div>\n    </div>\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n        HOME</button>\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n        Booking</button>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n  <!-- Nearest Store Section -->\n  <ng-container\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n    <div class=\"store-section\">\n      <div class=\"d-flex align-items-center store-item\">\n        <span class=\"store-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <div class=\"store-details\">\n          <div class=\"store-text\">\n            <span class=\"store-label\">Nearest Store - </span>\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\n          </div>\n          <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n          <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-center w-100\">\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n          STORE</button>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #emptyStore>\n    <div class=\"delivery-section\">\n      <div class=\"d-flex align-items-center\">\n        <span class=\"delivery-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <span class=\"delivery-text\">No Stores are available</span>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n    <!-- Header: Title + Average | Bar Chart -->\n    <div class=\"rv-header\">\n      <div class=\"rv-header-left\">\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\n        <div class=\"rv-average-row\">\n          <!-- filled stars -->\n          <div class=\"rv-stars\">\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                  fill=\"#eab308\" />\n              </svg>\n            </ng-container>\n          </div>\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n          <span class=\"rv-avg-label\">average</span>\n        </div>\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n          {{responseData?.totalReviewCount | number}} Reviews\n        </div>\n      </div>\n\n      <div class=\"rv-bars\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"rv-bar-row\">\n            <span class=\"rv-bar-label\">{{rating}}</span>\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                fill=\"#eab308\" />\n            </svg>\n            <div class=\"rv-bar-track\">\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Review Cards Grid -->\n    <div class=\"rv-grid\">\n      <ng-container *ngFor=\"let review of reviewsData\">\n        <ng-container *ngIf=\"review.review\">\n          <div class=\"rv-card\">\n            <div class=\"rv-card-top\">\n              <div class=\"rv-reviewer\">\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n                  class=\"rv-avatar\" alt=\"\">\n                <div class=\"rv-name-date\">\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n                </div>\n              </div>\n              <!-- Star rating -->\n              <div class=\"rv-card-stars\">\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                </ng-container>\n              </div>\n            </div>\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n            <!-- Review Images -->\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n              </a>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}.custom-specifications{margin-top:16px}.spec-title{font-weight:600;margin-bottom:8px}.spec-table{width:100%;border-collapse:collapse;border:1px solid #ddd}.spec-table th,.spec-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:top;word-break:break-word}.spec-table th{width:35%;font-weight:600;background-color:#f8f9fa}@media screen and (max-width: 600px){.spec-table th,.spec-table td{padding:8px}.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\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: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i17.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "isBrowseProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -20313,7 +20461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         SanitizeHtmlPipe,
                         NgxSkeletonLoaderModule
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div> -->\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n      [simpoLayout]=\"styles?.layout\" #container>\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div> -->\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n          <div class=\"product-hero-card-modern\">\n            <ng-container *ngIf=\"isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n            </ng-container>\n          </div>\n\n\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <!-- Moved descriptors to Details tab below -->\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <!-- Moved tags to Details tab below -->\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <!-- Tabs Navigation -->\n      <div class=\"product-tabs-container\">\n        <ul class=\"tabs-list\">\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Details')\">Details</li>\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Reviews')\">Reviews</li>\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n        </ul>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content-pane\">\n        <div *ngIf=\"activeTab == 'Details'\">\n          <!-- Integrated descriptors and tags here -->\n          <div class=\"mt-2\">\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"activeTab == 'Reviews'\">\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n        </div>\n\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\n          <div class=\"pb-glass-container mt-2\">\n\n            <!-- One card per material \u2014 generic, works for any material type -->\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\n              <div class=\"pb-glass-card\">\n                <div class=\"pb-glass-header\"\n                     [style.background]=\"styles?.background?.accentColor\"\n                     [style.color]=\"'#fff'\">\n                  {{ ele?.materialName | titlecase }}\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Purity</span>\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Net Weight</span>\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Value</span>\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- Making Charges card -->\n            <div class=\"pb-glass-card\">\n              <div class=\"pb-glass-header\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                Making Charges\n              </div>\n              <!-- <div class=\"pb-glass-row\">\n                <span class=\"pb-label\">Net Weight</span>\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n              </div> -->\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\n                <span class=\"pb-label\">Making Charge %</span>\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n              </div>\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n                <span class=\"pb-label\">Value</span>\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n            <!-- Summary card -->\n            <div class=\"pb-summary-card\">\n              <div class=\"pb-summary-row\">\n                <span>Total Value</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-summary-row\">\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-grand-total\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                <span>TOTAL</span>\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </section>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n          message</mat-icon>Notify Me</button>\n    </div>\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-3\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-semibold\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"product-info-minimal\">\n    <!-- Brand -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\n      <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\n    </div>\n\n    <!-- Item Code -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n    </div>\n\n    <!-- Title and Price Row -->\n    <div class=\"title-price-row-modern\">\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n      <div class=\"product-price-modern\">\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n          number:'1.0-0'}}\n      </div>\n    </div>\n\n    <!-- Rating Row -->\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n      <span class=\"separator\">|</span>\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n        {{responseData?.totalReviewCount}} reviews</span>\n    </div>\n\n    <!-- Brief Description -->\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc mt-2\">\n    <div>\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n          [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div> -->\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n          [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele?.materialName | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/{{ele?.unit | titlecase}}\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.purity |\n                    titlecase}}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container> -->\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\n      <div class=\"main-image-container p-0\">\n        <div class=\"item-img rounded-3\">\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n          </lib-ngx-image-zoom>\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n            class=\"w-100 h-100 object-fit-cover\">\n        </div>\n      </div>\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"bento-masonry-container\">\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n      </div>\n    </div>\n  </ng-container>\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n          Schedule a Video Call\n        </button>\n        <ng-container *ngIf=\"videoCallAdded\">\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n            <mat-icon>check_circle</mat-icon>\n            <span>Added to your Video Call request</span>\n          </div>\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n            Booking</button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section mb-2\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n            style=\"width: 100%;\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon d-flex align-items-center\">\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n            </svg>\n          </span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            expected Order will\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n  <!-- Try At Home Section -->\n  <div class=\"try-home-section\">\n    <div class=\"d-flex align-items-start try-home-item\">\n      <span class=\"home-icon d-flex align-items-center\">\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n        </svg>\n      </span>\n      <div class=\"try-home-details\">\n        <div class=\"try-home-header\">\n          <span class=\"try-home-text\">Try At Home</span>\n          <span class=\"free-text\"> (It's Free)</span>\n        </div>\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n        <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n      </div>\n    </div>\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n        HOME</button>\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n        Booking</button>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n  <!-- Nearest Store Section -->\n  <ng-container\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n    <div class=\"store-section\">\n      <div class=\"d-flex align-items-center store-item\">\n        <span class=\"store-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <div class=\"store-details\">\n          <div class=\"store-text\">\n            <span class=\"store-label\">Nearest Store - </span>\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\n          </div>\n          <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n          <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-center w-100\">\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n          STORE</button>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #emptyStore>\n    <div class=\"delivery-section\">\n      <div class=\"d-flex align-items-center\">\n        <span class=\"delivery-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <span class=\"delivery-text\">No Stores are available</span>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n    <!-- Header: Title + Average | Bar Chart -->\n    <div class=\"rv-header\">\n      <div class=\"rv-header-left\">\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\n        <div class=\"rv-average-row\">\n          <!-- filled stars -->\n          <div class=\"rv-stars\">\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                  fill=\"#eab308\" />\n              </svg>\n            </ng-container>\n          </div>\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n          <span class=\"rv-avg-label\">average</span>\n        </div>\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n          {{responseData?.totalReviewCount | number}} Reviews\n        </div>\n      </div>\n\n      <div class=\"rv-bars\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"rv-bar-row\">\n            <span class=\"rv-bar-label\">{{rating}}</span>\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                fill=\"#eab308\" />\n            </svg>\n            <div class=\"rv-bar-track\">\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Review Cards Grid -->\n    <div class=\"rv-grid\">\n      <ng-container *ngFor=\"let review of reviewsData\">\n        <ng-container *ngIf=\"review.review\">\n          <div class=\"rv-card\">\n            <div class=\"rv-card-top\">\n              <div class=\"rv-reviewer\">\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n                  class=\"rv-avatar\" alt=\"\">\n                <div class=\"rv-name-date\">\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n                </div>\n              </div>\n              <!-- Star rating -->\n              <div class=\"rv-card-stars\">\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                </ng-container>\n              </div>\n            </div>\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n            <!-- Review Images -->\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n              </a>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div> -->\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n      [simpoLayout]=\"styles?.layout\" #container>\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div> -->\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n          <div class=\"product-hero-card-modern\">\n            <ng-container *ngIf=\"isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n            </ng-container>\n          </div>\n\n\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <!-- Moved descriptors to Details tab below -->\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <!-- Moved tags to Details tab below -->\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <!-- Tabs Navigation -->\n      <div class=\"product-tabs-container\">\n        <ul class=\"tabs-list\">\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Details')\">Details</li>\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Reviews')\">Reviews</li>\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n        </ul>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content-pane\">\n        <div *ngIf=\"activeTab == 'Details'\">\n          <!-- Integrated descriptors and tags here -->\n          <div class=\"mt-2\">\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"activeTab == 'Reviews'\">\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n        </div>\n\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\n          <div class=\"pb-glass-container mt-2\">\n\n            <!-- One card per material \u2014 generic, works for any material type -->\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\n              <div class=\"pb-glass-card\">\n                <div class=\"pb-glass-header\"\n                     [style.background]=\"styles?.background?.accentColor\"\n                     [style.color]=\"'#fff'\">\n                  {{ ele?.materialName | titlecase }}\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Purity</span>\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Net Weight</span>\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Value</span>\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- Making Charges card -->\n            <div class=\"pb-glass-card\">\n              <div class=\"pb-glass-header\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                Making Charges\n              </div>\n              <!-- <div class=\"pb-glass-row\">\n                <span class=\"pb-label\">Net Weight</span>\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n              </div> -->\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\n                <span class=\"pb-label\">Making Charge %</span>\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n              </div>\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n                <span class=\"pb-label\">Value</span>\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n            <!-- Summary card -->\n            <div class=\"pb-summary-card\">\n              <div class=\"pb-summary-row\">\n                <span>Total Value</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-summary-row\">\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-grand-total\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                <span>TOTAL</span>\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </section>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n          message</mat-icon>Notify Me</button>\n    </div>\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-3\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-semibold\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"product-info-minimal\">\n    <!-- Brand -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\n      <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\n    </div>\n\n    <!-- Item Code -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n    </div>\n\n    <!-- Title and Price Row -->\n    <div class=\"title-price-row-modern\">\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n      <div class=\"product-price-modern\">\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n          number:'1.0-0'}}\n      </div>\n    </div>\n\n    <!-- Rating Row -->\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n      <span class=\"separator\">|</span>\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n        {{responseData?.totalReviewCount}} reviews</span>\n    </div>\n\n    <!-- Brief Description -->\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc mt-2\">\n    <div>\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n          [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div> -->\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n          [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <div class=\"custom-specifications\" *ngIf=\"customFieldSpecs.length\">\n        <div class=\"body-large spec-title\">Specifications</div>\n        <table class=\"spec-table\">\n          <tbody>\n            <tr *ngFor=\"let spec of customFieldSpecs\">\n              <th scope=\"row\">{{ spec.label }}</th>\n              <td>{{ spec.value }}</td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele?.materialName | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/{{ele?.unit | titlecase}}\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.purity |\n                    titlecase}}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container> -->\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\n      <div class=\"main-image-container p-0\">\n        <div class=\"item-img rounded-3\">\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n          </lib-ngx-image-zoom>\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n            class=\"w-100 h-100 object-fit-cover\">\n        </div>\n      </div>\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"bento-masonry-container\">\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n      </div>\n    </div>\n  </ng-container>\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n          Schedule a Video Call\n        </button>\n        <ng-container *ngIf=\"videoCallAdded\">\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n            <mat-icon>check_circle</mat-icon>\n            <span>Added to your Video Call request</span>\n          </div>\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n            Booking</button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section mb-2\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n            style=\"width: 100%;\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon d-flex align-items-center\">\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n            </svg>\n          </span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            expected Order will\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n  <!-- Try At Home Section -->\n  <div class=\"try-home-section\">\n    <div class=\"d-flex align-items-start try-home-item\">\n      <span class=\"home-icon d-flex align-items-center\">\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n        </svg>\n      </span>\n      <div class=\"try-home-details\">\n        <div class=\"try-home-header\">\n          <span class=\"try-home-text\">Try At Home</span>\n          <span class=\"free-text\"> (It's Free)</span>\n        </div>\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n        <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n      </div>\n    </div>\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n        HOME</button>\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n        Booking</button>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n  <!-- Nearest Store Section -->\n  <ng-container\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n    <div class=\"store-section\">\n      <div class=\"d-flex align-items-center store-item\">\n        <span class=\"store-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <div class=\"store-details\">\n          <div class=\"store-text\">\n            <span class=\"store-label\">Nearest Store - </span>\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\n          </div>\n          <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n          <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-center w-100\">\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n          STORE</button>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #emptyStore>\n    <div class=\"delivery-section\">\n      <div class=\"d-flex align-items-center\">\n        <span class=\"delivery-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <span class=\"delivery-text\">No Stores are available</span>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n    <!-- Header: Title + Average | Bar Chart -->\n    <div class=\"rv-header\">\n      <div class=\"rv-header-left\">\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\n        <div class=\"rv-average-row\">\n          <!-- filled stars -->\n          <div class=\"rv-stars\">\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                  fill=\"#eab308\" />\n              </svg>\n            </ng-container>\n          </div>\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n          <span class=\"rv-avg-label\">average</span>\n        </div>\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n          {{responseData?.totalReviewCount | number}} Reviews\n        </div>\n      </div>\n\n      <div class=\"rv-bars\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"rv-bar-row\">\n            <span class=\"rv-bar-label\">{{rating}}</span>\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                fill=\"#eab308\" />\n            </svg>\n            <div class=\"rv-bar-track\">\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Review Cards Grid -->\n    <div class=\"rv-grid\">\n      <ng-container *ngFor=\"let review of reviewsData\">\n        <ng-container *ngIf=\"review.review\">\n          <div class=\"rv-card\">\n            <div class=\"rv-card-top\">\n              <div class=\"rv-reviewer\">\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n                  class=\"rv-avatar\" alt=\"\">\n                <div class=\"rv-name-date\">\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n                </div>\n              </div>\n              <!-- Star rating -->\n              <div class=\"rv-card-stars\">\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                </ng-container>\n              </div>\n            </div>\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n            <!-- Review Images -->\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n              </a>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}.custom-specifications{margin-top:16px}.spec-title{font-weight:600;margin-bottom:8px}.spec-table{width:100%;border-collapse:collapse;border:1px solid #ddd}.spec-table th,.spec-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:top;word-break:break-word}.spec-table th{width:35%;font-weight:600;background-color:#f8f9fa}@media screen and (max-width: 600px){.spec-table th,.spec-table td{padding:8px}.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -20436,6 +20584,20 @@ class ProductListComponent extends BaseSection {
                 name: 'Customer rating', value: 'customerRating'
             }
         ];
+        // Filters the server already maps onto brandId / minPrice+maxPrice / categoryId / collectionId.
+        // The legacy blocks drive those, so they must never be sent in customFieldFilters.
+        this.SYSTEM_FILTER_IDS = ['brand', 'sellingPrice', 'category', 'collection'];
+        this.BUILT_IN_SORTS = ['', 'newest', 'lowestPrice', 'highestPrice', 'customerRating'];
+        // Server-driven filter groups (query-options), minus the system ones above.
+        this.customFilterGroups = [];
+        this.customChoiceSelections = {};
+        this.customRangeSelections = {};
+        this.customGroupCollapsed = {};
+        this.filterOptionsKey = null;
+        // Category/collection tokens from the URL that matched nothing in the loaded lists
+        // (the category list is "featured" only). Sent as categorySlugName / collectionSlugName.
+        this.urlCategorySlugs = [];
+        this.urlCollectionSlugs = [];
         this.screenWidth = 0;
         this.filterList = [];
         this.totalCount = 0;
@@ -20475,12 +20637,16 @@ class ProductListComponent extends BaseSection {
             { label: '1 Star above', min: 1, max: 5, selected: false }
         ];
         this.priceRangeFlag = false;
+        // Identifiers the API returned for this page. A legacy block is hidden when the API supplies it.
+        this.apiFilterIds = new Set();
         // Whether Try at Home / Video Call are offered is an Appointment-app setting
         // (homeVisitProductsEnabled/videoCallProductsEnabled), not a website-settings toggle.
         this.appointmentSettings = null;
         this.toShowInJewellery = false;
         this.IsEcommerce = false;
         this.isMaterialBasedPricing = false;
+        this.listsLoaded = false;
+        this.lastListPath = '';
         this.ringSizes = [
             { size: 'Bands', status: false },
             { size: 'Cocktail', status: false },
@@ -20601,6 +20767,12 @@ class ProductListComponent extends BaseSection {
         // Your existing category/filter toggling
         if (type === "FILTER" && category) {
             category.status = !category.status;
+            // Once the shopper picks from the sidebar, the URL slugs no longer apply.
+            if (this.categories.includes(category) || this.collections.includes(category)) {
+                this.urlCategorySlugs = [];
+                this.urlCollectionSlugs = [];
+                this.filterOptionsKey = null;
+            }
             // this.filteredChips.push({name: category.option, type: 'categoryOrCollection', id: category.id})
             this.filteredChips = [
                 ...this.selectedCategoryCollectionChips.map(x => ({ ...x, type: 'categoryOrCollection' })),
@@ -20650,7 +20822,8 @@ class ProductListComponent extends BaseSection {
         this.isAllListLoaded = false;
         this.responseData = [];
         this.fetchAnalytics();
-        this.restService.getFilteredProduct(this.collections.filter(x => x.status).map(x => x.id), this.categories.filter(x => x.status).map(x => x.id), this.searchText, this.pricingMin, this.pricingMax, this.minRating, this.maxRating, this.sortBy ?? "", this.pageNo - 1, this.size, this.brands.filter(x => x.status).map(x => x.id)).subscribe((response) => {
+        this.loadFilterOptions();
+        this.restService.getFilteredProduct(this.collections.filter(x => x.status).map(x => x.id), this.categories.filter(x => x.status).map(x => x.id), this.searchText, this.pricingMin, this.pricingMax, this.minRating, this.maxRating, this.sortBy ?? "", this.pageNo - 1, this.size, this.brands.filter(x => x.status).map(x => x.id), this.customSearchOptions).subscribe((response) => {
             this.responseData = response.data ?? [];
             this.totalCount = response.count ?? 0;
             if (!this.priceRangeFlag) {
@@ -20664,6 +20837,158 @@ class ProductListComponent extends BaseSection {
             this.apiLoading = false;
         });
     }
+    // Extra search body properties for the server-driven filters and custom sorts.
+    get customSearchOptions() {
+        const customFieldFilters = [];
+        Object.entries(this.customChoiceSelections).forEach(([identifier, values]) => {
+            if (values.length)
+                customFieldFilters.push({ identifier, values });
+        });
+        Object.entries(this.customRangeSelections).forEach(([identifier, range]) => {
+            if (range.min !== '' || range.max !== '') {
+                const filter = { identifier };
+                if (range.min !== '')
+                    filter.min = range.min;
+                if (range.max !== '')
+                    filter.max = range.max;
+                customFieldFilters.push(filter);
+            }
+        });
+        // A custom-field sort key needs a direction; the four built-in sorts must not send one.
+        const isCustomSort = !this.BUILT_IN_SORTS.includes(this.sortBy ?? '');
+        return {
+            customFieldFilters,
+            sortDirection: isCustomSort ? 'asc' : undefined,
+            categorySlugName: this.urlCategorySlugs,
+            collectionSlugName: this.urlCollectionSlugs
+        };
+    }
+    // Reloads sidebar groups + sorts from query-options when the active category/collection changes.
+    // An unseeded business (or any failure) leaves the legacy sidebar and four built-in sorts as is.
+    loadFilterOptions() {
+        // One call scopes by every selected category/collection: ids and slugs are arrays in the body and
+        // are combined. A URL slug that matched no loaded category/collection (e.g. one outside the
+        // featured list) goes in as a slug.
+        const scope = {
+            categoryIds: this.categories.filter(x => x.status).map(x => x.id),
+            collectionIds: this.collections.filter(x => x.status).map(x => x.id),
+            categorySlugNames: [...this.urlCategorySlugs],
+            collectionSlugNames: [...this.urlCollectionSlugs],
+        };
+        const key = JSON.stringify(scope);
+        if (key === this.filterOptionsKey)
+            return;
+        this.filterOptionsKey = key;
+        this.restService.getFilterOptions(scope).subscribe({
+            next: (options) => {
+                if (key !== this.filterOptionsKey)
+                    return; // a newer selection already replaced this one
+                if (options.sorts.length) {
+                    this.filteringArray = options.sorts.map(sort => ({
+                        name: sort.label,
+                        value: sort.key === 'newest' ? '' : sort.key
+                    }));
+                }
+                // Brand / Categories / Collections come back as groups too. They are drawn from the API
+                // (with counts) and selecting one drives the same state the legacy blocks use, so the
+                // search still sends brandId / categoryId / collectionId. Selling Price keeps the legacy
+                // price block. Custom fields (Color, ...) are shown on jewellery pages as well.
+                this.customFilterGroups = options.groups
+                    .map(group => ({
+                    ...group,
+                    filters: group.filters.filter(f => f.identifier !== 'sellingPrice')
+                }))
+                    .filter(group => group.filters.length > 0);
+                this.apiFilterIds = new Set(this.customFilterGroups.flatMap(g => g.filters.map(f => f.identifier)));
+                // Drop selections for filters that do not exist on this page any more.
+                const available = this.apiFilterIds;
+                Object.keys(this.customChoiceSelections).forEach(id => { if (!available.has(id))
+                    delete this.customChoiceSelections[id]; });
+                Object.keys(this.customRangeSelections).forEach(id => { if (!available.has(id))
+                    delete this.customRangeSelections[id]; });
+            },
+            error: () => {
+                this.customFilterGroups = [];
+                this.filterOptionsKey = null;
+            }
+        });
+    }
+    isApiFilter(identifier) {
+        return this.apiFilterIds.has(identifier);
+    }
+    // brand / category / collection share state with the legacy sidebar and search fields.
+    systemList(identifier) {
+        if (identifier === 'category')
+            return this.categories;
+        if (identifier === 'collection')
+            return this.collections;
+        if (identifier === 'brand')
+            return this.brands;
+        return null;
+    }
+    isSystemListFilter(identifier) {
+        return this.systemList(identifier) !== null;
+    }
+    isCustomChoiceSelected(identifier, value) {
+        const list = this.systemList(identifier);
+        if (list)
+            return list.some(item => item.id === value && item.status);
+        return this.customChoiceSelections[identifier]?.includes(value) ?? false;
+    }
+    toggleCustomChoice(filter, value) {
+        const list = this.systemList(filter.identifier);
+        if (list) {
+            let item = list.find(x => x.id === value);
+            if (!item) {
+                // e.g. a category outside the featured list: add it so it is selectable and searchable
+                const choice = filter.choices?.find(c => c.value === value);
+                item = { option: choice?.label ?? value, id: value, imgUrl: '', status: false };
+                list.push(item);
+            }
+            this.applyFilter(item, 'FILTER');
+            return;
+        }
+        const current = this.customChoiceSelections[filter.identifier] ?? [];
+        // BOOLEAN is a yes/no, so only one value at a time.
+        const single = filter.control === 'BOOLEAN';
+        this.customChoiceSelections[filter.identifier] = current.includes(value)
+            ? current.filter(v => v !== value)
+            : single ? [value] : [...current, value];
+        this.applyFilter();
+    }
+    customRange(identifier) {
+        return this.customRangeSelections[identifier] ?? { min: '', max: '' };
+    }
+    setCustomRange(identifier, edge, value) {
+        const range = { ...this.customRange(identifier) };
+        range[edge] = value === null || value === undefined ? '' : String(value).trim();
+        this.customRangeSelections[identifier] = range;
+        this.applyFilter();
+    }
+    // Chips for server-driven filters, shown next to the legacy ones.
+    get selectedCustomChips() {
+        const filters = this.customFilterGroups.flatMap(g => g.filters);
+        const chips = [];
+        filters.forEach(filter => {
+            (this.customChoiceSelections[filter.identifier] ?? []).forEach(value => {
+                const label = filter.choices?.find(c => c.value === value)?.label ?? value;
+                chips.push({ id: `custom-${filter.identifier}-${value}`, name: label, type: 'custom', identifier: filter.identifier, value });
+            });
+            const range = this.customRangeSelections[filter.identifier];
+            if (range && (range.min !== '' || range.max !== '')) {
+                chips.push({
+                    id: `custom-${filter.identifier}-range`,
+                    name: `${filter.label}: ${range.min || filter.min || 0} - ${range.max || filter.max || 'any'}`,
+                    type: 'custom',
+                    identifier: filter.identifier
+                });
+            }
+        });
+        return chips;
+    }
+    get displayChips() {
+        return [...this.filteredChips, ...this.selectedCustomChips];
+    }
     dynamicPriceRange(minPrice, maxPrice) {
         this.priceRanges = [];
         const range = maxPrice - minPrice;
@@ -20705,7 +21030,7 @@ class ProductListComponent extends BaseSection {
             this.isListLoading = false;
             return;
         }
-        this.restService.getFilteredProduct(this.collections.filter((x) => x.status).map((x) => x.id), this.categories.filter((x) => x.status).map((x) => x.id), this.searchText, this.pricingMin, this.pricingMax, this.minRating, this.maxRating, this.sortBy ?? "", this.pageNo - 1, this.size, this.brands.filter((x) => x.status).map((x) => x.id)).subscribe((response) => {
+        this.restService.getFilteredProduct(this.collections.filter((x) => x.status).map((x) => x.id), this.categories.filter((x) => x.status).map((x) => x.id), this.searchText, this.pricingMin, this.pricingMax, this.minRating, this.maxRating, this.sortBy ?? "", this.pageNo - 1, this.size, this.brands.filter((x) => x.status).map((x) => x.id), this.customSearchOptions).subscribe((response) => {
             this.responseData = [...(this.responseData ?? []), ...(response.data ?? [])];
             this.totalCount = response.count;
             this.isAllListLoaded = (this.responseData?.length ?? 0) >= this.totalCount;
@@ -20798,6 +21123,10 @@ class ProductListComponent extends BaseSection {
         }
         analyticsEvent['CATEGORIES'] = this.categories.filter(x => x.status).map(x => x.id);
         analyticsEvent['COLLECTIONS'] = this.collections.filter(x => x.status).map(x => x.id);
+        const customFilters = this.customSearchOptions.customFieldFilters;
+        if (customFilters.length) {
+            analyticsEvent['CUSTOM_FILTERS'] = customFilters;
+        }
         this.analyticsService.startNewContext(analyticsEvent, this.latestAnalyicsEvent);
     }
     getCategoriesAndCollection() {
@@ -20816,19 +21145,57 @@ class ProductListComponent extends BaseSection {
             }))
         ]).subscribe({
             next: (res) => {
-                this.categories = res[1].filter((category) => category.featuredCollection || true).map((category) => { return { option: category.categoryName, id: category.categoryId, imgUrl: category.imgUrl?.[0], status: false }; });
-                this.collections = res[0].filter((collection) => collection.featuredCategory || true).map((collection) => { return { option: collection.collectionName, id: collection.collectionId, status: false }; });
+                this.categories = res[1].filter((category) => category.featuredCollection || true).map((category) => { return { option: category.categoryName, id: category.categoryId, imgUrl: category.imgUrl?.[0], status: false, slug: category.slugName }; });
+                this.collections = res[0].filter((collection) => collection.featuredCategory || true).map((collection) => { return { option: collection.collectionName, id: collection.collectionId, status: false, slug: collection.slugName }; });
                 this.brands = (res[2] ?? []).map((brand) => { return { option: brand.brandName, id: brand.brandId, imgUrl: brand.imgUrl?.[0], status: false }; });
-                const qParamCollections = this.activatedRoute.snapshot.queryParams["collections"];
-                const qParamCategory = this.activatedRoute.snapshot.queryParams["category"];
                 const qParamBrand = this.activatedRoute.snapshot.queryParams["brand"];
-                this.filterByCategoryCollectionParam(qParamCategory, qParamCollections, qParamBrand);
+                const { category, collections } = this.resolveListRouteParams();
+                this.listsLoaded = true;
+                this.lastListPath = this.currentListPath();
+                this.filterByCategoryCollectionParam(category, collections, qParamBrand);
+                // /list/a -> /list/b keeps this component alive, so re-apply when the path changes.
+                this.listPathSubscription?.unsubscribe();
+                this.listPathSubscription = this.router.events
+                    .pipe(filter((event) => event instanceof NavigationEnd))
+                    .subscribe(() => {
+                    const path = this.currentListPath();
+                    if (!this.listsLoaded || path === this.lastListPath || !path.startsWith('list'))
+                        return;
+                    this.lastListPath = path;
+                    const resolved = this.resolveListRouteParams();
+                    this.filterByCategoryCollectionParam(resolved.category, resolved.collections, this.activatedRoute.snapshot.queryParams["brand"]);
+                });
             },
             error: (res) => {
                 this.filterItemList();
             }
         });
     }
+    // Path part of the URL from `list` onwards, used to detect /list/a -> /list/b navigation.
+    currentListPath() {
+        return parseListPath(window.location.pathname).join('/') ? 'list/' + parseListPath(window.location.pathname).join('/') : 'list';
+    }
+    // Category/collection for the page: path segments (/list/{category}/{collection}) first, then the
+    // legacy ?category= / ?collections= query params so old links keep working.
+    resolveListRouteParams() {
+        const queryParams = this.activatedRoute.snapshot.queryParams;
+        const segments = parseListPath(window.location.pathname);
+        if (segments.length === 0)
+            return { category: queryParams["category"], collections: queryParams["collections"] };
+        const matches = (list, segment) => {
+            const token = slugFromName(segment);
+            return list.some((item) => item.slug?.toLowerCase() === token ||
+                slugFromName(item.option) === token);
+        };
+        if (segments.length >= 2)
+            return { category: segments[0], collections: segments[1] };
+        // One segment is either a category or a collection. Category first; a segment that matches
+        // neither (e.g. a category outside the featured list) goes to the server as a category slug.
+        const [segment] = segments;
+        if (!matches(this.categories, segment) && matches(this.collections, segment))
+            return { category: undefined, collections: segment };
+        return { category: segment, collections: undefined };
+    }
     get selectedCategoryCollectionChips() {
         const chips = [];
         if (this.categories) {
@@ -20880,7 +21247,7 @@ class ProductListComponent extends BaseSection {
     }
     getAllCategories() {
         this.restService.getAllCategories().subscribe((response) => {
-            this.categories = response.filter((category) => category.featuredCollection || true).map((category) => { return { option: category.categoryName, id: category.categoryId, imgUrl: category.imgUrl?.[0], status: false }; });
+            this.categories = response.filter((category) => category.featuredCollection || true).map((category) => { return { option: category.categoryName, id: category.categoryId, imgUrl: category.imgUrl?.[0], status: false, slug: category.slugName }; });
             const qParamCollections = this.activatedRoute.snapshot.queryParams["collections"];
             const qParamCategory = this.activatedRoute.snapshot.queryParams["category"];
             this.filterByCategoryCollectionParam(qParamCategory, qParamCollections);
@@ -20888,7 +21255,7 @@ class ProductListComponent extends BaseSection {
     }
     getAllCollections() {
         this.restService.getAllCollections().subscribe((response) => {
-            this.collections = response.filter((collection) => collection.featuredCategory || true).map((collection) => { return { option: collection.collectionName, id: collection.collectionId, status: false }; });
+            this.collections = response.filter((collection) => collection.featuredCategory || true).map((collection) => { return { option: collection.collectionName, id: collection.collectionId, status: false, slug: collection.slugName }; });
             const qParamCollections = this.activatedRoute.snapshot.queryParams["collections"];
             const qParamCategory = this.activatedRoute.snapshot.queryParams["category"];
             this.filterByCategoryCollectionParam(qParamCategory, qParamCollections);
@@ -20946,12 +21313,27 @@ class ProductListComponent extends BaseSection {
         const brands = qBrands?.split("+")?.map((brand) => brand.replaceAll("_", " ").toLowerCase()).filter((brand) => brand.length > 0);
         if ((categories?.length ?? 0) > 0 || (collections?.length ?? 0) > 0 || (brands?.length ?? 0) > 0)
             this.latestAnalyicsEvent = 'FILTER_APPLIED';
+        // A URL token is a backend slugName (`mens-wear`) or the older name form (`Mens_Wear`).
+        // The loaded list (featured categories, collections) may not carry `slugName`, so the name is
+        // slugified too: `mens-wear` must match a category named "Mens Wear".
+        const toSlug = (token) => slugFromName(token);
+        const matchesToken = (item, tokens) => tokens.some((token) => (item.slug && item.slug.toLowerCase() === toSlug(token)) ||
+            slugFromName(item.option) === toSlug(token));
         this.categories?.forEach((category) => {
-            category.status = categories?.includes(category?.option?.toLowerCase()) ?? false;
+            category.status = matchesToken(category, categories ?? []);
         });
         this.collections?.forEach((collection) => {
-            collection.status = collections?.includes(collection?.option?.toLowerCase()) ?? false;
-        });
+            collection.status = matchesToken(collection, collections ?? []);
+        });
+        // Tokens that matched nothing in the loaded lists go to the server as slugs. An unknown slug
+        // returns no rows, which is the intended empty state for a bad link.
+        this.urlCategorySlugs = (categories ?? [])
+            .filter((token) => !this.categories.some((c) => matchesToken(c, [token])))
+            .map(toSlug);
+        this.urlCollectionSlugs = (collections ?? [])
+            .filter((token) => !this.collections.some((c) => matchesToken(c, [token])))
+            .map(toSlug);
+        this.filterOptionsKey = null;
         this.brands?.forEach((brand) => {
             brand.status = brands?.includes(brand?.option?.toLowerCase()) ?? false;
         });
@@ -20964,6 +21346,17 @@ class ProductListComponent extends BaseSection {
         this.filterItemList();
     }
     removeFilter(filter) {
+        if (filter.type === 'custom') {
+            if (filter.value !== undefined) {
+                this.customChoiceSelections[filter.identifier] =
+                    (this.customChoiceSelections[filter.identifier] ?? []).filter(v => v !== filter.value);
+            }
+            else {
+                delete this.customRangeSelections[filter.identifier];
+            }
+            this.applyFilter();
+            return;
+        }
         if (filter.type === 'price') {
             // Deselect this price range and trigger filter
             const idx = this.priceRanges.findIndex(pr => filter.id === 'price-' + pr.min + '-' + pr.max);
@@ -21068,6 +21461,11 @@ class ProductListComponent extends BaseSection {
         this.shopForData.forEach((size) => size.status = false);
         this.materialSizeData.forEach((size) => size.status = false);
         this.metalSizeData.forEach((size) => size.status = false);
+        this.customChoiceSelections = {};
+        this.customRangeSelections = {};
+        this.urlCategorySlugs = [];
+        this.urlCollectionSlugs = [];
+        this.filterOptionsKey = null;
         this.filteredChips = [];
         // this.router.navigate(['list']);
         this.navigateFilter(this.sortBy);
@@ -21088,6 +21486,7 @@ class ProductListComponent extends BaseSection {
     }
     ngOnDestroy() {
         clearInterval(this.tagInterval);
+        this.listPathSubscription?.unsubscribe();
     }
     handleSyncScroll() {
         // Don't recursively trigger scrolls
@@ -21355,7 +21754,7 @@ class ProductListComponent extends BaseSection {
         return brightness > threshold ? '#000000' : '#ffffff';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$1.MatBottomSheet }, { token: i3$2.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }, { token: AnalyticsService }, { token: BookingProductCartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize()", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div> -->\n\n<ng-container *ngIf=\"!isLoading\">\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\n    [spacingHorizontal]=\"stylesLayout\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\"\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\n    </div> -->\n\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\n        <div class=\"filter body-large\">\n          Filters\n        </div>\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n          CLEAR ALL\n        </div>\n      </div>\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\n        style=\"width: 77.5%; margin-right: 1%;\">\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\n          <ng-container *ngFor=\"let filter of filteredChips\">\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n              <span>{{filter.name}}</span>\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n              </span>\n            </div>\n          </ng-container>\n        </div>\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\n          </select>\n        </div> -->\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\n          <span class=\"sort-label\">Sort By:</span>\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\n\n          <div class=\"options\" *ngIf=\"isOpen\">\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\n              (click)=\"selectOption(filter, $event)\">\n              {{ filter.name }}\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\n      <ng-container *ngFor=\"let filter of filteredChips\">\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n          <span>{{filter.name}}</span>\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"main-product-section\">\n      <div class=\"filter-side\">\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n      </div>\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\n        #listScrollContainer>\n        <ng-container *ngIf=\"!apiLoading\">\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\n                  [index]=\"i\"></simpo-small-product-listing>\n              </ng-container>\n            </div>\n          </div>\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\n            <div>\n              <div class=\"cart-image\">\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n                  alt=\"\">\n              </div>\n              <div class=\"cart-text\">\n                <div class=\"heading-medium d-flex justify-content-center\">\n                  Product list is empty\n                </div>\n                <div class=\"description d-flex justify-content-center mt-4\">\n                  Looks like no item is present with filter. Go ahead & explore top categories.\n                </div>\n              </div>\n            </div>\n          </section>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n      </div>\n\n      <div class=\"bottom-filter\">\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n          <mat-icon>sort</mat-icon>\n          <span>Sort by</span>\n        </div>\n        <div class=\"divider\"></div>\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n          <mat-icon>filter_list</mat-icon>\n          <span>Filter</span>\n        </div>\n      </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n        [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <div class=\"fav-icon-wrapper\">\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\n    </mat-icon>\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\n    </mat-icon>\n    <span class=\"fav-tooltip\">\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\n    </span>\n  </div>\n</ng-template>\n\n\n\n<ng-template #Tags let-product=\"data\">\n  <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\n    <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\n      [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\n      [style.color]=\"getTextColor(styles?.background?.accentColor)\">\n      {{ tag }}\n    </span>\n  </div>\n</ng-template>\n\n\n<ng-template #FilterSection>\n  <section>\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"categoriesCollapsed = !categoriesCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop by Categories</b></h6>\n        <mat-icon>{{ categoriesCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!categoriesCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\n          (click)=\"applyFilter(category, 'FILTER')\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"category.status\" />\n          <div class=\"trim-text\">{{category.option | titlecase}}</div>\n        </div>\n        <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\n          [style.color]=\"styles?.background?.accentColor\">\n          <span class=\"toggle-text\">\n            {{ showAllCategories ? 'Show Less' : 'Show More' }}\n            <span class=\"dropdown-icon\">\n              <ng-container *ngIf=\"!showAllCategories\">\n                <mat-icon>expand_more</mat-icon>\n              </ng-container>\n              <ng-container *ngIf=\"showAllCategories\">\n                <mat-icon>expand_less</mat-icon>\n              </ng-container>\n            </span>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"collectionsCollapsed = !collectionsCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop by Collections</b></h6>\n        <mat-icon>{{ collectionsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!collectionsCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\n          (click)=\"applyFilter(collection, 'FILTER')\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"collection.status\" />\n          <div class=\"trim-text\">{{collection.option | titlecase}}</div>\n        </div>\n        <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\n          [style.color]=\"styles?.background?.accentColor\">\n          <span class=\"toggle-text\">\n            {{ showAllCollections ? 'Show Less' : 'Show More' }}\n            <span class=\"dropdown-icon\">\n              <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\n              <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\n            </span>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"(brands?.length ?? 0) > 1\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"brandsCollapsed = !brandsCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop by Brand</b></h6>\n        <mat-icon>{{ brandsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!brandsCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let brand of displayedBrands\"\n          (click)=\"applyFilter(brand, 'FILTER')\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"brand.status\" />\n          <div class=\"trim-text\">{{brand.option | titlecase}}</div>\n        </div>\n        <div *ngIf=\"brands.length > 4\" class=\"toggle-categories\" (click)=\"toggleBrands()\"\n          [style.color]=\"styles?.background?.accentColor\">\n          <span class=\"toggle-text\">\n            {{ showAllBrands ? 'Show Less' : 'Show More' }}\n            <span class=\"dropdown-icon\">\n              <ng-container *ngIf=\"!showAllBrands\"><mat-icon>expand_more</mat-icon></ng-container>\n              <ng-container *ngIf=\"showAllBrands\"><mat-icon>expand_less</mat-icon></ng-container>\n            </span>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Ratings</b></h6>\n        <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!ratingsCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"rating.selected\" />\n          <div class=\"trim-text\">{{ rating.label }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop by price</b></h6>\n        <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!priceCollapsed\">\n        <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\n          <div class=\"trim-text\">{{ range.label }}</div>\n        </label>\n      </ng-container>\n    </div>\n\n\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Product Type</b></h6>\n        <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!productTypeCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop for</b></h6>\n        <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!shopForCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of shopForData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Material</b></h6>\n        <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!materialCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Metal</b></h6>\n        <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!metalCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Ring Style</b></h6>\n        <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!ringStyleCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SortingSection>\n  <section style=\"padding: 10px\">\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n      <span>Sort by</span>\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n    </div>\n    <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\n        [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\n    </mat-radio-group>\n  </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\n  <ng-template #theme1style1>\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\n        class=\"default-image position-relative\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n      </div>\n\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\n        class=\"default-image position-relative\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\n        <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\n          <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\n          <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\n        </div>\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n      </div>\n\n      <div class=\"mt-2 w-100\">\n        <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n          <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n              (click)=\"selectVarient(product, varient)\">\n          </ng-container>\n        </div>\n        <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\n          <div class=\"price body-large text-left d-flex align-items-center g-10\">\n            <div class=\"fs-16\">\n              <span [innerHTML]='currency'></span>\n              {{product?.price?.sellingPrice | number:'1.0-0'}}\n            </div>\n\n            <div class=\"fs-16 text-start\">\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\n                {{product?.price?.value | number:'1.0-0'}}\n              </span>\n            </div>\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\n              <span [innerHTML]='currency'></span>\n              {{product.price.sellingPrice | number:'1.0-0'}}\n            </div> -->\n          </div>\n\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n\n          <div class=\"material-info\"\n            *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\n            <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\n            <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\n            <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\n          </div>\n\n          <div\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\n            class=\"add-to-cart-btn\">\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\"\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n            </div>\n          </div>\n          <div>\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n          </div>\n          <div class=\"try-button-section\"\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\n            <div class=\"try-at-home\">\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n                HOME</button>\n            </div>\n            <div class=\"video-call-image\">\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\n    <div class=\"row w-100\">\n      <div class=\"col-8 d-flex flex-column gap-3\">\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n        <div class=\"fs-16 text-start\">\n          <span [innerHTML]='currency'></span>\n          {{product?.price?.sellingPrice | number:'1.0-0'}}\n        </div>\n        <div class=\"d-flex w-45\">\n          <div\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\n            class=\"add-to-cart-btn w-100\">\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\"\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n            </div>\n          </div>\n          <div>\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n          </div>\n          <div class=\"try-button-section w-100\"\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\n            <div class=\"try-at-home\">\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n                HOME</button>\n            </div>\n            <div class=\"video-call-image\">\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-4 h-100 position-relative\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\n          (click)=\"proceedToProductDesc(product)\">\n      </div>\n    </div>\n\n\n\n  </ng-container>\n\n\n\n\n\n</ng-template>\n\n\n\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.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:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}.product-tag-badge{position:absolute;top:8px;left:8px;z-index:2;pointer-events:none}.product-tag-label{position:absolute;top:0;left:0;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 10px;border-radius:4px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.product-tag-label.tag-active{opacity:1;transform:translateY(0)}.material-info{font-size:11px;color:#888;margin-top:2px;letter-spacing:.3px}\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: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize()", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div> -->\n\n<ng-container *ngIf=\"!isLoading\">\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\n    [spacingHorizontal]=\"stylesLayout\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\"\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\n    </div> -->\n\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\n        <div class=\"filter body-large\">\n          Filters\n        </div>\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n          CLEAR ALL\n        </div>\n      </div>\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\n        style=\"width: 77.5%; margin-right: 1%;\">\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\"></div>\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\n          </select>\n        </div> -->\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\n          <span class=\"sort-label\">Sort By:</span>\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\n\n          <div class=\"options\" *ngIf=\"isOpen\">\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\n              (click)=\"selectOption(filter, $event)\">\n              {{ filter.name }}\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div class=\"main-product-section\">\n      <div class=\"filter-side\">\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n      </div>\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\n        #listScrollContainer>\n        <ng-container *ngIf=\"!apiLoading\">\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\n                  [index]=\"i\"></simpo-small-product-listing>\n              </ng-container>\n            </div>\n          </div>\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\n            <div>\n              <div class=\"cart-image\">\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n                  alt=\"\">\n              </div>\n              <div class=\"cart-text\">\n                <div class=\"heading-medium d-flex justify-content-center\">\n                  Product list is empty\n                </div>\n                <div class=\"description d-flex justify-content-center mt-4\">\n                  Looks like no item is present with filter. Go ahead & explore top categories.\n                </div>\n              </div>\n            </div>\n          </section>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n      </div>\n\n      <div class=\"bottom-filter\">\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n          <mat-icon>sort</mat-icon>\n          <span>Sort by</span>\n        </div>\n        <div class=\"divider\"></div>\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n          <mat-icon>filter_list</mat-icon>\n          <span>Filter</span>\n        </div>\n      </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n        [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <div class=\"fav-icon-wrapper\">\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\n    </mat-icon>\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\n    </mat-icon>\n    <span class=\"fav-tooltip\">\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\n    </span>\n  </div>\n</ng-template>\n\n\n\n<ng-template #Tags let-product=\"data\">\n  <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\n    <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\n      [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\n      [style.color]=\"getTextColor(styles?.background?.accentColor)\">\n      {{ tag }}\n    </span>\n  </div>\n</ng-template>\n\n\n<ng-template #FilterSection>\n  <section>\n    <!-- Server-driven filters from query-options (Brand, Categories, Collections, Specifications, ...).\n         Empty for unseeded businesses, in which case the legacy blocks below are the sidebar. -->\n    <div class=\"categories-section\" *ngFor=\"let group of customFilterGroups\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"customGroupCollapsed[group.key] = !customGroupCollapsed[group.key]\" style=\"cursor:pointer\">\n        <h6><b>{{ group.label }}</b></h6>\n        <mat-icon>{{ customGroupCollapsed[group.key] ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!customGroupCollapsed[group.key]\">\n        <ng-container *ngFor=\"let filter of group.filters\">\n          <div *ngIf=\"group.filters.length > 1\" class=\"trim-text\" style=\"font-weight: 600; margin-top: 8px;\">\n            {{ filter.label }}\n          </div>\n\n          <ng-container *ngIf=\"filter.control === 'RANGE'; else customChoices\">\n            <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-top: 6px;\">\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\n                [attr.max]=\"filter.max\" [placeholder]=\"'Min ' + (filter.min ?? '')\"\n                [ngModel]=\"customRange(filter.identifier).min\"\n                (change)=\"setCustomRange(filter.identifier, 'min', $any($event.target).value)\" />\n              <span>-</span>\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\n                [attr.max]=\"filter.max\" [placeholder]=\"'Max ' + (filter.max ?? '')\"\n                [ngModel]=\"customRange(filter.identifier).max\"\n                (change)=\"setCustomRange(filter.identifier, 'max', $any($event.target).value)\" />\n            </div>\n          </ng-container>\n\n          <ng-template #customChoices>\n            <ng-container *ngIf=\"filter.control === 'BOOLEAN' && !filter.choices?.length; else choiceList\">\n              <label class=\"category-options\">\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, 'true')\"\n                  (change)=\"toggleCustomChoice(filter, 'true')\" />\n                <div class=\"trim-text\">Yes</div>\n              </label>\n            </ng-container>\n            <ng-template #choiceList>\n              <label class=\"category-options\" *ngFor=\"let choice of filter.choices\">\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, choice.value)\"\n                  (change)=\"toggleCustomChoice(filter, choice.value)\" />\n                <div class=\"trim-text\">{{ choice.label }} <span *ngIf=\"choice.count !== undefined\">({{ choice.count }})</span></div>\n              </label>\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <!-- No legacy Categories block: categories are shown only when query-options returns them. -->\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Product Type</b></h6>\n        <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!productTypeCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop for</b></h6>\n        <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!shopForCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of shopForData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Material</b></h6>\n        <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!materialCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Metal</b></h6>\n        <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!metalCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Ring Style</b></h6>\n        <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!ringStyleCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Ratings and price stay at the bottom, below the server-driven filters. -->\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Ratings</b></h6>\n        <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!ratingsCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"rating.selected\" />\n          <div class=\"trim-text\">{{ rating.label }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop by price</b></h6>\n        <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!priceCollapsed\">\n        <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\n          <div class=\"trim-text\">{{ range.label }}</div>\n        </label>\n      </ng-container>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SortingSection>\n  <section style=\"padding: 10px\">\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n      <span>Sort by</span>\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n    </div>\n    <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\n        [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\n    </mat-radio-group>\n  </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\n  <ng-template #theme1style1>\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\n        class=\"default-image position-relative\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n      </div>\n\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\n        class=\"default-image position-relative\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\n        <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\n          <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\n          <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\n        </div>\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n      </div>\n\n      <div class=\"mt-2 w-100\">\n        <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n          <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n              (click)=\"selectVarient(product, varient)\">\n          </ng-container>\n        </div>\n        <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\n          <div class=\"price body-large text-left d-flex align-items-center g-10\">\n            <div class=\"fs-16\">\n              <span [innerHTML]='currency'></span>\n              {{product?.price?.sellingPrice | number:'1.0-0'}}\n            </div>\n\n            <div class=\"fs-16 text-start\">\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\n                {{product?.price?.value | number:'1.0-0'}}\n              </span>\n            </div>\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\n              <span [innerHTML]='currency'></span>\n              {{product.price.sellingPrice | number:'1.0-0'}}\n            </div> -->\n          </div>\n\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n\n          <div class=\"material-info\"\n            *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\n            <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\n            <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\n            <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\n          </div>\n\n          <div\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\n            class=\"add-to-cart-btn\">\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\"\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n            </div>\n          </div>\n          <div>\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n          </div>\n          <div class=\"try-button-section\"\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\n            <div class=\"try-at-home\">\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n                HOME</button>\n            </div>\n            <div class=\"video-call-image\">\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\n    <div class=\"row w-100\">\n      <div class=\"col-8 d-flex flex-column gap-3\">\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n        <div class=\"fs-16 text-start\">\n          <span [innerHTML]='currency'></span>\n          {{product?.price?.sellingPrice | number:'1.0-0'}}\n        </div>\n        <div class=\"d-flex w-45\">\n          <div\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\n            class=\"add-to-cart-btn w-100\">\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\"\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n            </div>\n          </div>\n          <div>\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n          </div>\n          <div class=\"try-button-section w-100\"\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\n            <div class=\"try-at-home\">\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n                HOME</button>\n            </div>\n            <div class=\"video-call-image\">\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-4 h-100 position-relative\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\n          (click)=\"proceedToProductDesc(product)\">\n      </div>\n    </div>\n\n\n\n  </ng-container>\n\n\n\n\n\n</ng-template>\n\n\n\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.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:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}.product-tag-badge{position:absolute;top:8px;left:8px;z-index:2;pointer-events:none}.product-tag-label{position:absolute;top:0;left:0;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 10px;border-radius:4px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.product-tag-label.tag-active{opacity:1;transform:translateY(0)}.material-info{font-size:11px;color:#888;margin-top:2px;letter-spacing:.3px}\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: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
@@ -21382,7 +21781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatChipsModule,
                         ButtonEditorDirective,
                         SpacingHorizontalDirective,
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div> -->\n\n<ng-container *ngIf=\"!isLoading\">\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\n    [spacingHorizontal]=\"stylesLayout\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\"\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\n    </div> -->\n\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\n        <div class=\"filter body-large\">\n          Filters\n        </div>\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n          CLEAR ALL\n        </div>\n      </div>\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\n        style=\"width: 77.5%; margin-right: 1%;\">\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\n          <ng-container *ngFor=\"let filter of filteredChips\">\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n              <span>{{filter.name}}</span>\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n              </span>\n            </div>\n          </ng-container>\n        </div>\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\n          </select>\n        </div> -->\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\n          <span class=\"sort-label\">Sort By:</span>\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\n\n          <div class=\"options\" *ngIf=\"isOpen\">\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\n              (click)=\"selectOption(filter, $event)\">\n              {{ filter.name }}\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\n      <ng-container *ngFor=\"let filter of filteredChips\">\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\n          <span>{{filter.name}}</span>\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"main-product-section\">\n      <div class=\"filter-side\">\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n      </div>\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\n        #listScrollContainer>\n        <ng-container *ngIf=\"!apiLoading\">\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\n                  [index]=\"i\"></simpo-small-product-listing>\n              </ng-container>\n            </div>\n          </div>\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\n            <div>\n              <div class=\"cart-image\">\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n                  alt=\"\">\n              </div>\n              <div class=\"cart-text\">\n                <div class=\"heading-medium d-flex justify-content-center\">\n                  Product list is empty\n                </div>\n                <div class=\"description d-flex justify-content-center mt-4\">\n                  Looks like no item is present with filter. Go ahead & explore top categories.\n                </div>\n              </div>\n            </div>\n          </section>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n      </div>\n\n      <div class=\"bottom-filter\">\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n          <mat-icon>sort</mat-icon>\n          <span>Sort by</span>\n        </div>\n        <div class=\"divider\"></div>\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n          <mat-icon>filter_list</mat-icon>\n          <span>Filter</span>\n        </div>\n      </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n        [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <div class=\"fav-icon-wrapper\">\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\n    </mat-icon>\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\n    </mat-icon>\n    <span class=\"fav-tooltip\">\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\n    </span>\n  </div>\n</ng-template>\n\n\n\n<ng-template #Tags let-product=\"data\">\n  <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\n    <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\n      [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\n      [style.color]=\"getTextColor(styles?.background?.accentColor)\">\n      {{ tag }}\n    </span>\n  </div>\n</ng-template>\n\n\n<ng-template #FilterSection>\n  <section>\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"categoriesCollapsed = !categoriesCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop by Categories</b></h6>\n        <mat-icon>{{ categoriesCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!categoriesCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\n          (click)=\"applyFilter(category, 'FILTER')\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"category.status\" />\n          <div class=\"trim-text\">{{category.option | titlecase}}</div>\n        </div>\n        <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\n          [style.color]=\"styles?.background?.accentColor\">\n          <span class=\"toggle-text\">\n            {{ showAllCategories ? 'Show Less' : 'Show More' }}\n            <span class=\"dropdown-icon\">\n              <ng-container *ngIf=\"!showAllCategories\">\n                <mat-icon>expand_more</mat-icon>\n              </ng-container>\n              <ng-container *ngIf=\"showAllCategories\">\n                <mat-icon>expand_less</mat-icon>\n              </ng-container>\n            </span>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"collectionsCollapsed = !collectionsCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop by Collections</b></h6>\n        <mat-icon>{{ collectionsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!collectionsCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\n          (click)=\"applyFilter(collection, 'FILTER')\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"collection.status\" />\n          <div class=\"trim-text\">{{collection.option | titlecase}}</div>\n        </div>\n        <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\n          [style.color]=\"styles?.background?.accentColor\">\n          <span class=\"toggle-text\">\n            {{ showAllCollections ? 'Show Less' : 'Show More' }}\n            <span class=\"dropdown-icon\">\n              <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\n              <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\n            </span>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"(brands?.length ?? 0) > 1\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"brandsCollapsed = !brandsCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop by Brand</b></h6>\n        <mat-icon>{{ brandsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!brandsCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let brand of displayedBrands\"\n          (click)=\"applyFilter(brand, 'FILTER')\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"brand.status\" />\n          <div class=\"trim-text\">{{brand.option | titlecase}}</div>\n        </div>\n        <div *ngIf=\"brands.length > 4\" class=\"toggle-categories\" (click)=\"toggleBrands()\"\n          [style.color]=\"styles?.background?.accentColor\">\n          <span class=\"toggle-text\">\n            {{ showAllBrands ? 'Show Less' : 'Show More' }}\n            <span class=\"dropdown-icon\">\n              <ng-container *ngIf=\"!showAllBrands\"><mat-icon>expand_more</mat-icon></ng-container>\n              <ng-container *ngIf=\"showAllBrands\"><mat-icon>expand_less</mat-icon></ng-container>\n            </span>\n          </span>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Ratings</b></h6>\n        <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!ratingsCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"rating.selected\" />\n          <div class=\"trim-text\">{{ rating.label }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop by price</b></h6>\n        <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!priceCollapsed\">\n        <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\n          <div class=\"trim-text\">{{ range.label }}</div>\n        </label>\n      </ng-container>\n    </div>\n\n\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Product Type</b></h6>\n        <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!productTypeCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop for</b></h6>\n        <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!shopForCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of shopForData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Material</b></h6>\n        <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!materialCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Metal</b></h6>\n        <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!metalCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Ring Style</b></h6>\n        <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!ringStyleCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SortingSection>\n  <section style=\"padding: 10px\">\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n      <span>Sort by</span>\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n    </div>\n    <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\n        [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\n    </mat-radio-group>\n  </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\n  <ng-template #theme1style1>\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\n        class=\"default-image position-relative\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n      </div>\n\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\n        class=\"default-image position-relative\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\n        <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\n          <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\n          <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\n        </div>\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n      </div>\n\n      <div class=\"mt-2 w-100\">\n        <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n          <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n              (click)=\"selectVarient(product, varient)\">\n          </ng-container>\n        </div>\n        <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\n          <div class=\"price body-large text-left d-flex align-items-center g-10\">\n            <div class=\"fs-16\">\n              <span [innerHTML]='currency'></span>\n              {{product?.price?.sellingPrice | number:'1.0-0'}}\n            </div>\n\n            <div class=\"fs-16 text-start\">\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\n                {{product?.price?.value | number:'1.0-0'}}\n              </span>\n            </div>\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\n              <span [innerHTML]='currency'></span>\n              {{product.price.sellingPrice | number:'1.0-0'}}\n            </div> -->\n          </div>\n\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n\n          <div class=\"material-info\"\n            *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\n            <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\n            <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\n            <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\n          </div>\n\n          <div\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\n            class=\"add-to-cart-btn\">\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\"\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n            </div>\n          </div>\n          <div>\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n          </div>\n          <div class=\"try-button-section\"\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\n            <div class=\"try-at-home\">\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n                HOME</button>\n            </div>\n            <div class=\"video-call-image\">\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\n    <div class=\"row w-100\">\n      <div class=\"col-8 d-flex flex-column gap-3\">\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n        <div class=\"fs-16 text-start\">\n          <span [innerHTML]='currency'></span>\n          {{product?.price?.sellingPrice | number:'1.0-0'}}\n        </div>\n        <div class=\"d-flex w-45\">\n          <div\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\n            class=\"add-to-cart-btn w-100\">\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\"\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n            </div>\n          </div>\n          <div>\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n          </div>\n          <div class=\"try-button-section w-100\"\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\n            <div class=\"try-at-home\">\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n                HOME</button>\n            </div>\n            <div class=\"video-call-image\">\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-4 h-100 position-relative\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\n          (click)=\"proceedToProductDesc(product)\">\n      </div>\n    </div>\n\n\n\n  </ng-container>\n\n\n\n\n\n</ng-template>\n\n\n\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.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:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}.product-tag-badge{position:absolute;top:8px;left:8px;z-index:2;pointer-events:none}.product-tag-label{position:absolute;top:0;left:0;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 10px;border-radius:4px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.product-tag-label.tag-active{opacity:1;transform:translateY(0)}.material-info{font-size:11px;color:#888;margin-top:2px;letter-spacing:.3px}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div> -->\n\n<ng-container *ngIf=\"!isLoading\">\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\n    [spacingHorizontal]=\"stylesLayout\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\"\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\n    </div> -->\n\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\n        <div class=\"filter body-large\">\n          Filters\n        </div>\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n          CLEAR ALL\n        </div>\n      </div>\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\n        style=\"width: 77.5%; margin-right: 1%;\">\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\"></div>\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\n          </select>\n        </div> -->\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\n          <span class=\"sort-label\">Sort By:</span>\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\n\n          <div class=\"options\" *ngIf=\"isOpen\">\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\n              (click)=\"selectOption(filter, $event)\">\n              {{ filter.name }}\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n    <div class=\"main-product-section\">\n      <div class=\"filter-side\">\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n      </div>\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\n        #listScrollContainer>\n        <ng-container *ngIf=\"!apiLoading\">\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\n                  [index]=\"i\"></simpo-small-product-listing>\n              </ng-container>\n            </div>\n          </div>\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\n            <div>\n              <div class=\"cart-image\">\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n                  alt=\"\">\n              </div>\n              <div class=\"cart-text\">\n                <div class=\"heading-medium d-flex justify-content-center\">\n                  Product list is empty\n                </div>\n                <div class=\"description d-flex justify-content-center mt-4\">\n                  Looks like no item is present with filter. Go ahead & explore top categories.\n                </div>\n              </div>\n            </div>\n          </section>\n        </ng-container>\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\n      </div>\n\n      <div class=\"bottom-filter\">\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n          <mat-icon>sort</mat-icon>\n          <span>Sort by</span>\n        </div>\n        <div class=\"divider\"></div>\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n          <mat-icon>filter_list</mat-icon>\n          <span>Filter</span>\n        </div>\n      </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n        [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\n\n<ng-template #FavouriteTags let-product=\"data\">\n  <div class=\"fav-icon-wrapper\">\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\n    </mat-icon>\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\n    </mat-icon>\n    <span class=\"fav-tooltip\">\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\n    </span>\n  </div>\n</ng-template>\n\n\n\n<ng-template #Tags let-product=\"data\">\n  <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\n    <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\n      [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\n      [style.color]=\"getTextColor(styles?.background?.accentColor)\">\n      {{ tag }}\n    </span>\n  </div>\n</ng-template>\n\n\n<ng-template #FilterSection>\n  <section>\n    <!-- Server-driven filters from query-options (Brand, Categories, Collections, Specifications, ...).\n         Empty for unseeded businesses, in which case the legacy blocks below are the sidebar. -->\n    <div class=\"categories-section\" *ngFor=\"let group of customFilterGroups\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"customGroupCollapsed[group.key] = !customGroupCollapsed[group.key]\" style=\"cursor:pointer\">\n        <h6><b>{{ group.label }}</b></h6>\n        <mat-icon>{{ customGroupCollapsed[group.key] ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!customGroupCollapsed[group.key]\">\n        <ng-container *ngFor=\"let filter of group.filters\">\n          <div *ngIf=\"group.filters.length > 1\" class=\"trim-text\" style=\"font-weight: 600; margin-top: 8px;\">\n            {{ filter.label }}\n          </div>\n\n          <ng-container *ngIf=\"filter.control === 'RANGE'; else customChoices\">\n            <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-top: 6px;\">\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\n                [attr.max]=\"filter.max\" [placeholder]=\"'Min ' + (filter.min ?? '')\"\n                [ngModel]=\"customRange(filter.identifier).min\"\n                (change)=\"setCustomRange(filter.identifier, 'min', $any($event.target).value)\" />\n              <span>-</span>\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\n                [attr.max]=\"filter.max\" [placeholder]=\"'Max ' + (filter.max ?? '')\"\n                [ngModel]=\"customRange(filter.identifier).max\"\n                (change)=\"setCustomRange(filter.identifier, 'max', $any($event.target).value)\" />\n            </div>\n          </ng-container>\n\n          <ng-template #customChoices>\n            <ng-container *ngIf=\"filter.control === 'BOOLEAN' && !filter.choices?.length; else choiceList\">\n              <label class=\"category-options\">\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, 'true')\"\n                  (change)=\"toggleCustomChoice(filter, 'true')\" />\n                <div class=\"trim-text\">Yes</div>\n              </label>\n            </ng-container>\n            <ng-template #choiceList>\n              <label class=\"category-options\" *ngFor=\"let choice of filter.choices\">\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, choice.value)\"\n                  (change)=\"toggleCustomChoice(filter, choice.value)\" />\n                <div class=\"trim-text\">{{ choice.label }} <span *ngIf=\"choice.count !== undefined\">({{ choice.count }})</span></div>\n              </label>\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <!-- No legacy Categories block: categories are shown only when query-options returns them. -->\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Product Type</b></h6>\n        <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!productTypeCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop for</b></h6>\n        <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!shopForCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of shopForData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Material</b></h6>\n        <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!materialCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Metal</b></h6>\n        <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!metalCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Ring Style</b></h6>\n        <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!ringStyleCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\n          <div class=\"trim-text\">{{ size.size }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Ratings and price stay at the bottom, below the server-driven filters. -->\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Ratings</b></h6>\n        <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!ratingsCollapsed\">\n        <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [checked]=\"rating.selected\" />\n          <div class=\"trim-text\">{{ rating.label }}</div>\n        </div>\n      </ng-container>\n    </div>\n\n    <div class=\"categories-section\">\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\n        (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\n        <h6><b>Shop by price</b></h6>\n        <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </div>\n      <ng-container *ngIf=\"!priceCollapsed\">\n        <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\n            [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\n          <div class=\"trim-text\">{{ range.label }}</div>\n        </label>\n      </ng-container>\n    </div>\n  </section>\n</ng-template>\n\n<ng-template #SortingSection>\n  <section style=\"padding: 10px\">\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n      <span>Sort by</span>\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n    </div>\n    <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\n        [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\n    </mat-radio-group>\n  </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\n  <ng-template #theme1style1>\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\n        class=\"default-image position-relative\">\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n      </div>\n\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\n        class=\"default-image position-relative\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\n        <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\n          <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\n          <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\n        </div>\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\n      </div>\n\n      <div class=\"mt-2 w-100\">\n        <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n          <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\n              (click)=\"selectVarient(product, varient)\">\n          </ng-container>\n        </div>\n        <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\n          <div class=\"price body-large text-left d-flex align-items-center g-10\">\n            <div class=\"fs-16\">\n              <span [innerHTML]='currency'></span>\n              {{product?.price?.sellingPrice | number:'1.0-0'}}\n            </div>\n\n            <div class=\"fs-16 text-start\">\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\n                {{product?.price?.value | number:'1.0-0'}}\n              </span>\n            </div>\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\n              <span [innerHTML]='currency'></span>\n              {{product.price.sellingPrice | number:'1.0-0'}}\n            </div> -->\n          </div>\n\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n\n          <div class=\"material-info\"\n            *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\n            <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\n            <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\n            <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\n          </div>\n\n          <div\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\n            class=\"add-to-cart-btn\">\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\"\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n            </div>\n          </div>\n          <div>\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n          </div>\n          <div class=\"try-button-section\"\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\n            <div class=\"try-at-home\">\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n                HOME</button>\n            </div>\n            <div class=\"video-call-image\">\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\n    <div class=\"row w-100\">\n      <div class=\"col-8 d-flex flex-column gap-3\">\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n        <div class=\"fs-16 text-start\">\n          <span [innerHTML]='currency'></span>\n          {{product?.price?.sellingPrice | number:'1.0-0'}}\n        </div>\n        <div class=\"d-flex w-45\">\n          <div\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\n            class=\"add-to-cart-btn w-100\">\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\"\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n            </div>\n          </div>\n          <div>\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n          </div>\n          <div class=\"try-button-section w-100\"\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\n            <div class=\"try-at-home\">\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\n                HOME</button>\n            </div>\n            <div class=\"video-call-image\">\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-4 h-100 position-relative\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\n          (click)=\"proceedToProductDesc(product)\">\n      </div>\n    </div>\n\n\n\n  </ng-container>\n\n\n\n\n\n</ng-template>\n\n\n\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.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:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}.product-tag-badge{position:absolute;top:8px;left:8px;z-index:2;pointer-events:none}.product-tag-label{position:absolute;top:0;left:0;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 10px;border-radius:4px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.product-tag-label.tag-active{opacity:1;transform:translateY(0)}.material-info{font-size:11px;color:#888;margin-top:2px;letter-spacing:.3px}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -22629,6 +23028,27 @@ class MyBookingsComponent {
     pendingAmount(b) {
         return Math.max(0, this.totalDue(b) - (b.totalCollectedAtBooking ?? 0));
     }
+    /** Fetched on click, not pre-cached - ecommerce generates/caches the invoice PDF the first time
+     * it's asked for, so there's nothing to gain by fetching it earlier. Same S3 PDF url pattern
+     * ecommerce's own order-details.component.ts reads invoiceUrl/receiptUrl from, just resolved
+     * live here instead of being present on the row already. */
+    downloadInvoice() {
+        if (!this.selected?.invoiceId)
+            return;
+        this.restService.getBookingInvoiceUrl(this.selected.groupId).subscribe({
+            next: (url) => {
+                if (url) {
+                    window.open(url, '_blank');
+                }
+                else {
+                    this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Invoice not available yet' });
+                }
+            },
+            error: (error) => {
+                this.messageService.add({ severity: 'error', summary: 'Error', detail: error?.error?.detail ?? 'Unable to fetch invoice' });
+            },
+        });
+    }
     get canCancelSelected() {
         return !!this.selected && (this.selected.status === 'HOLD' || this.selected.status === 'BOOKED' || this.selected.status === 'PENDING');
     }
@@ -22636,12 +23056,25 @@ class MyBookingsComponent {
         return !!this.selected && this.selected.status === 'BOOKED' && !!this.selected.canReschedule;
     }
     get canAddServiceSelected() {
-        return !!this.selected && this.selected.status === 'BOOKED';
+        return !!this.selected && this.selected.status === 'BOOKED' && !!this.selected.addServiceAvailable;
     }
     viewBookingDetail(b) {
         this.selected = b;
         this.currentTab = 'DETAIL';
         this.reschedulePanelOpen = false;
+        this.checkAddServiceAvailability(b);
+    }
+    /** Lazy, cached on the row - only ever queried once per booking (re-queried after a successful
+     * add, since what's addable just changed). Best-effort: a failure just leaves the action
+     * hidden, same as this component's other non-critical lookups. */
+    checkAddServiceAvailability(b) {
+        if (b.status !== 'BOOKED' || b.addServiceAvailable !== undefined)
+            return;
+        this.restService.getAddServiceOptions(b.groupId).subscribe((res) => {
+            b.addServiceAvailable = (res ?? []).length > 0;
+        }, () => {
+            b.addServiceAvailable = false;
+        });
     }
     backToList() {
         this.currentTab = 'LIST';
@@ -22797,6 +23230,10 @@ class MyBookingsComponent {
                     : this.addServiceSelected.length + ' services added';
                 this.messageService.add({ severity: 'success', summary });
                 this.refreshSelectedServiceLines();
+                if (this.selected) {
+                    this.selected.addServiceAvailable = undefined;
+                    this.checkAddServiceAvailability(this.selected);
+                }
             }, (error) => {
                 this.addServiceSubmitting = false;
                 this.addServiceError = error?.error?.message || 'Unable to add these services';
@@ -22857,11 +23294,11 @@ class MyBookingsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MyBookingsComponent, deps: [{ token: RestService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MyBookingsComponent, isStandalone: true, selector: "simpo-my-bookings", inputs: { data: "data" }, providers: [MessageService], viewQueries: [{ propertyName: "reschDayStripRef", first: true, predicate: ["reschDayStrip"], descendants: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n  <ng-container *ngIf=\"currentTab === 'LIST'\">\n    <div class=\"mb-title\">My Bookings</div>\n\n    <div class=\"mb-tabs\">\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n    </div>\n\n    <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n    <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n      <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n        <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n        <div class=\"mb-row-info\">\n          <div class=\"mb-row-top\">\n            <div class=\"mb-row-title\">{{title(b)}}</div>\n          </div>\n          <div class=\"mb-row-when\">{{when(b)}}</div>\n          <div class=\"mb-row-detail\">{{detail(b)}}</div>\n        </div>\n        <div class=\"mb-row-end\">\n          <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n        </div>\n      </button>\n    </div>\n\n    <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n      <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n      <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n    <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n      <mat-icon>arrow_back</mat-icon> Back to My Bookings\n    </button>\n\n    <div class=\"mb-detail-card\">\n      <div class=\"mb-detail-header\">\n        <div class=\"mb-detail-title-row\">\n          <div class=\"mb-detail-title\">{{title(selected)}}</div>\n          <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n        </div>\n        <div class=\"mb-detail-when\">{{when(selected)}}</div>\n      </div>\n\n      <div class=\"mb-detail-rows\">\n        <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n          <div class=\"mb-detail-k\">Services</div>\n          <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n          <div class=\"mb-detail-k\">Products</div>\n          <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n          <div class=\"mb-detail-k\">Contact</div>\n          <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n          <div class=\"mb-detail-k\">Address</div>\n          <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n          <div class=\"mb-detail-k\">Service price</div>\n          <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n          <div class=\"mb-detail-k\">Home visit charge</div>\n          <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Total</div>\n          <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Paid</div>\n          <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n          <div class=\"mb-detail-k\">Pending at appointment</div>\n          <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n        </div>\n      </div>\n\n      <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n        <mat-icon>videocam</mat-icon>\n        <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n      </div>\n\n      <div class=\"mb-policy\" *ngIf=\"canRescheduleSelected\">\n        <div class=\"mb-policy-title\">Reschedule policy</div>\n        <div class=\"mb-policy-text\">You can reschedule this booking up to {{rescheduleCutoffHours}} hour{{rescheduleCutoffHours === 1 ? '' : 's'}} before the appointment time.</div>\n      </div>\n      <div class=\"mb-policy\" *ngIf=\"canCancelSelected && cancellationPolicy\">\n        <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n        <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n      </div>\n\n      <div class=\"mb-actions-row\" *ngIf=\"selected.status === 'BOOKED' || canCancelSelected\">\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          *ngIf=\"selected.status === 'BOOKED'\"\n          [disabled]=\"!canRescheduleSelected\"\n          [title]=\"!canRescheduleSelected ? selected.rescheduleBlockedReason : ''\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openReschedulePanel()\"\n        >Reschedule booking</button>\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          *ngIf=\"canAddServiceSelected\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openAddServicePanel()\"\n        >Add service</button>\n        <button\n          type=\"button\"\n          class=\"mb-cancel-btn\"\n          *ngIf=\"canCancelSelected\"\n          [disabled]=\"cancelling\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openCancelConfirm()\"\n        >\n          {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n        </button>\n      </div>\n\n      <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n    </div>\n  </ng-container>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"reschedulePanelOpen\" (click)=\"closeReschedulePanel()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Choose a new date &amp; time</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeReschedulePanel()\">&times;</button>\n      </div>\n\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-resch-daystrip-row\">\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(-1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"></path></svg>\n          </button>\n          <div class=\"mb-resch-daystrip\" #reschDayStrip>\n            <button\n              type=\"button\"\n              class=\"mb-resch-day\"\n              *ngFor=\"let day of reschDays\"\n              [class.active]=\"day.iso === reschSelectedIso\"\n              [style.background]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              [style.borderColor]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              (click)=\"selectReschDay(day)\"\n            >\n              <span class=\"mb-resch-day-dow\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.dow}}</span>\n              <span class=\"mb-resch-day-num\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.num}}</span>\n            </button>\n          </div>\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>\n          </button>\n        </div>\n\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"reschLoadingSlots\">Loading available times\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!reschLoadingSlots && reschNoSlots\">No slots available on this date. Try another date.</div>\n        <div class=\"mb-resch-slots\" *ngIf=\"!reschLoadingSlots && reschSlots.length\">\n          <button\n            type=\"button\"\n            class=\"mb-resch-slot\"\n            *ngFor=\"let slot of reschSlots\"\n            [class.active]=\"slot === reschSelectedTime\"\n            [style.background]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.borderColor]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.color]=\"slot === reschSelectedTime ? contrastColor : null\"\n            (click)=\"selectReschTime(slot)\"\n          >{{slot}}</button>\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"reschError\">{{reschError}}</div>\n      </div>\n\n      <div class=\"mb-resch-footer\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeReschedulePanel()\">Cancel</button>\n        <button\n          type=\"button\"\n          class=\"mb-resch-confirm\"\n          [disabled]=\"reschInvalid\"\n          [style.background]=\"reschInvalid ? null : styles?.background?.accentColor\"\n          [style.color]=\"reschInvalid ? null : contrastColor\"\n          (click)=\"confirmReschedule()\"\n        >\n          {{reschConfirming ? 'Confirming\u2026' : 'Confirm new slot'}}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"cancelConfirmOpen\" (click)=\"closeCancelConfirm()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Cancel this booking?</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeCancelConfirm()\">&times;</button>\n      </div>\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-policy-text\">This can't be undone.</div>\n        <div class=\"mb-policy\" *ngIf=\"cancellationPolicy\">\n          <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n          <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n        </div>\n      </div>\n      <div class=\"mb-resch-footer\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeCancelConfirm()\">Keep booking</button>\n        <button type=\"button\" class=\"mb-resch-confirm\" [disabled]=\"cancelling\" (click)=\"cancelBooking()\">\n          {{cancelling ? 'Cancelling\u2026' : 'Yes, cancel booking'}}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"addServicePanelOpen\" (click)=\"closeAddServicePanel()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Add service(s)</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeAddServicePanel()\">&times;</button>\n      </div>\n\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"addServiceLoading\">Loading services\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!addServiceLoading && addServiceOptions.length === 0\">\n          No services available to add right now.\n        </div>\n\n        <div class=\"mb-addsvc-list\" *ngIf=\"!addServiceLoading && addServiceOptions.length\">\n          <button\n            type=\"button\"\n            class=\"mb-addsvc-row\"\n            [class.selected]=\"isAddServiceSelected(service)\"\n            *ngFor=\"let service of addServiceOptions\"\n            [disabled]=\"addServiceSubmitting\"\n            (click)=\"toggleAddService(service)\"\n          >\n            <input type=\"checkbox\" class=\"mb-addsvc-checkbox\" [checked]=\"isAddServiceSelected(service)\" (click)=\"$event.stopPropagation()\" (change)=\"toggleAddService(service)\" />\n            <div class=\"f1\">\n              <div class=\"mb-addsvc-name\">\n                {{service.name}}\n                <span class=\"mb-addsvc-meta\" *ngIf=\"service.duration\">{{service.duration}} min</span>\n              </div>\n            </div>\n            <div class=\"mb-addsvc-price\" *ngIf=\"service.priceDetails?.totalPrice\">\u20B9{{service.priceDetails.totalPrice}}</div>\n          </button>\n        </div>\n\n        <div class=\"mb-addsvc-total\" *ngIf=\"addServiceSelected.length && addServiceTotalDeposit > 0\">\n          Deposit due now: \u20B9{{addServiceTotalDeposit}}\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"addServiceError\">{{addServiceError}}</div>\n      </div>\n\n      <div class=\"mb-resch-footer\" *ngIf=\"!addServiceLoading && addServiceOptions.length\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeAddServicePanel()\">Cancel</button>\n        <button\n          type=\"button\"\n          class=\"mb-resch-confirm\"\n          [disabled]=\"!addServiceSelected.length || addServiceSubmitting\"\n          [style.background]=\"!addServiceSelected.length ? null : styles?.background?.accentColor\"\n          [style.color]=\"!addServiceSelected.length ? null : contrastColor\"\n          (click)=\"addService()\"\n        >\n          {{addServiceSubmitting ? 'Adding\u2026' : 'Add ' + (addServiceSelected.length || '') + ' service' + (addServiceSelected.length === 1 ? '' : 's')}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.status-ongoing{background:#e3f2fd;color:#1565c0}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}.mb-actions-row{display:flex;gap:12px}.mb-actions-row .mb-reschedule-btn,.mb-actions-row .mb-cancel-btn{flex:1}.mb-reschedule-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-reschedule-btn:disabled{opacity:.5;cursor:not-allowed}.mb-resch-backdrop{position:fixed;inset:0;background:#1b243673;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.mb-resch-panel{width:100%;max-width:440px;max-height:85vh;border-radius:14px;background:#fff;box-shadow:0 20px 50px #14141e40;display:flex;flex-direction:column;overflow:hidden}.mb-resch-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #F0ECE7;flex:none}.mb-resch-body{padding:18px 20px;overflow-y:auto}.mb-resch-footer{display:flex;gap:10px;padding:14px 20px;border-top:1px solid #F0ECE7;flex:none}.mb-resch-footer .mb-resch-cancel,.mb-resch-footer .mb-resch-confirm{flex:1}.mb-resch-cancel{height:46px;border:1.5px solid #E2E2E9;border-radius:8px;background:#fff;color:#5f6b7c;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-title{font-size:14px;font-weight:600;color:#1b2436}.mb-resch-close{border:none;background:none;font-size:18px;color:#8a94a3;cursor:pointer;line-height:1;width:max-content}.mb-resch-daystrip-row{display:flex;align-items:center;gap:4px;margin-bottom:14px}.mb-resch-daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}.mb-resch-daystrip::-webkit-scrollbar{height:5px}.mb-resch-daystrip::-webkit-scrollbar-thumb{background:#eee9e3;border-radius:999px}.mb-resch-nav{flex:none;width:26px!important;height:26px;border:1px solid #EEE9E3;border-radius:999px;background:#fff;color:#8a94a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.mb-resch-nav:hover{border-color:#7c3a11;color:#7c3a11}.mb-resch-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:50px!important;padding:8px 0;border:1px solid #EEE9E3;border-radius:10px;background:#fff;cursor:pointer}.mb-resch-day:hover{border-color:#7c3a11}.mb-resch-day-dow{font-size:10.5px;color:#8a94a3;text-transform:uppercase}.mb-resch-day-num{font-size:13.5px;font-weight:600;color:#1b2436}.mb-resch-slots-loading,.mb-resch-slots-empty{font-size:12.5px;color:#8a94a3;margin-bottom:14px}.mb-resch-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mb-resch-slot{padding:9px 6px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;font-size:12.5px!important;color:#1b2436;cursor:pointer}.mb-resch-error{margin-top:14px;font-size:12.5px;color:#b4432e}.mb-addsvc-list{display:flex;flex-direction:column;gap:8px}.mb-addsvc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-addsvc-row.selected{background:#f6f2fc;border-color:#6d28d9}.mb-addsvc-row:disabled{opacity:.6;cursor:default}.mb-addsvc-checkbox{flex:none;width:16px;height:16px;cursor:pointer}.mb-addsvc-row .f1{flex:1}.mb-addsvc-name{font-size:13px;color:#1b2436}.mb-addsvc-meta{display:block;font-size:11.5px;color:#8a94a3;margin-top:2px}.mb-addsvc-price{font-size:13px;font-weight:600;color:#1b2436;flex:none}.mb-addsvc-total{margin-top:12px;font-size:12.5px;font-weight:600;color:#1b2436}.mb-resch-confirm{height:46px;border:none;border-radius:8px;background:#94a3b8;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-confirm:disabled{opacity:.5;cursor:not-allowed}\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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MyBookingsComponent, isStandalone: true, selector: "simpo-my-bookings", inputs: { data: "data" }, providers: [MessageService], viewQueries: [{ propertyName: "reschDayStripRef", first: true, predicate: ["reschDayStrip"], descendants: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n  <ng-container *ngIf=\"currentTab === 'LIST'\">\n    <div class=\"mb-title\">My Bookings</div>\n\n    <div class=\"mb-tabs\">\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n    </div>\n\n    <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n    <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n      <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n        <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n        <div class=\"mb-row-info\">\n          <div class=\"mb-row-top\">\n            <div class=\"mb-row-title\">{{title(b)}}</div>\n          </div>\n          <div class=\"mb-row-when\">{{when(b)}}</div>\n          <div class=\"mb-row-detail\">{{detail(b)}}</div>\n        </div>\n        <div class=\"mb-row-end\">\n          <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n        </div>\n      </button>\n    </div>\n\n    <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n      <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n      <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n    <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n      <mat-icon>arrow_back</mat-icon> Back to My Bookings\n    </button>\n\n    <div class=\"mb-detail-card\">\n      <div class=\"mb-detail-header\">\n        <div class=\"mb-detail-title-row\">\n          <div class=\"mb-detail-title\">{{title(selected)}}</div>\n          <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n        </div>\n        <div class=\"mb-detail-when\">{{when(selected)}}</div>\n      </div>\n\n      <div class=\"mb-detail-rows\">\n        <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n          <div class=\"mb-detail-k\">Services</div>\n          <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n          <div class=\"mb-detail-k\">Products</div>\n          <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n          <div class=\"mb-detail-k\">Contact</div>\n          <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n          <div class=\"mb-detail-k\">Address</div>\n          <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n          <div class=\"mb-detail-k\">Service price</div>\n          <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n          <div class=\"mb-detail-k\">Home visit charge</div>\n          <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Total</div>\n          <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Paid</div>\n          <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n          <div class=\"mb-detail-k\">Pending at appointment</div>\n          <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n        </div>\n      </div>\n\n      <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n        <mat-icon>videocam</mat-icon>\n        <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n      </div>\n\n      <div class=\"mb-policy\" *ngIf=\"canRescheduleSelected\">\n        <div class=\"mb-policy-title\">Reschedule policy</div>\n        <div class=\"mb-policy-text\">You can reschedule this booking up to {{rescheduleCutoffHours}} hour{{rescheduleCutoffHours === 1 ? '' : 's'}} before the appointment time.</div>\n      </div>\n      <div class=\"mb-policy\" *ngIf=\"canCancelSelected && cancellationPolicy\">\n        <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n        <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n      </div>\n\n      <div class=\"mb-actions-row\" *ngIf=\"selected.status === 'BOOKED' || canCancelSelected\">\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          *ngIf=\"selected.status === 'BOOKED'\"\n          [disabled]=\"!canRescheduleSelected\"\n          [title]=\"!canRescheduleSelected ? selected.rescheduleBlockedReason : ''\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openReschedulePanel()\"\n        >Reschedule booking</button>\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          *ngIf=\"canAddServiceSelected\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openAddServicePanel()\"\n        >Add service</button>\n        <button\n          type=\"button\"\n          class=\"mb-cancel-btn\"\n          *ngIf=\"canCancelSelected\"\n          [disabled]=\"cancelling\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openCancelConfirm()\"\n        >\n          {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n        </button>\n      </div>\n\n      <div class=\"mb-actions-row\" *ngIf=\"selected.invoiceId && selected.status === 'COMPLETED'\">\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"downloadInvoice()\"\n        >Download invoice</button>\n      </div>\n\n      <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n    </div>\n  </ng-container>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"reschedulePanelOpen\" (click)=\"closeReschedulePanel()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Choose a new date &amp; time</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeReschedulePanel()\">&times;</button>\n      </div>\n\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-resch-daystrip-row\">\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(-1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"></path></svg>\n          </button>\n          <div class=\"mb-resch-daystrip\" #reschDayStrip>\n            <button\n              type=\"button\"\n              class=\"mb-resch-day\"\n              *ngFor=\"let day of reschDays\"\n              [class.active]=\"day.iso === reschSelectedIso\"\n              [style.background]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              [style.borderColor]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              (click)=\"selectReschDay(day)\"\n            >\n              <span class=\"mb-resch-day-dow\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.dow}}</span>\n              <span class=\"mb-resch-day-num\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.num}}</span>\n            </button>\n          </div>\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>\n          </button>\n        </div>\n\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"reschLoadingSlots\">Loading available times\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!reschLoadingSlots && reschNoSlots\">No slots available on this date. Try another date.</div>\n        <div class=\"mb-resch-slots\" *ngIf=\"!reschLoadingSlots && reschSlots.length\">\n          <button\n            type=\"button\"\n            class=\"mb-resch-slot\"\n            *ngFor=\"let slot of reschSlots\"\n            [class.active]=\"slot === reschSelectedTime\"\n            [style.background]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.borderColor]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.color]=\"slot === reschSelectedTime ? contrastColor : null\"\n            (click)=\"selectReschTime(slot)\"\n          >{{slot}}</button>\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"reschError\">{{reschError}}</div>\n      </div>\n\n      <div class=\"mb-resch-footer\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeReschedulePanel()\">Cancel</button>\n        <button\n          type=\"button\"\n          class=\"mb-resch-confirm\"\n          [disabled]=\"reschInvalid\"\n          [style.background]=\"reschInvalid ? null : styles?.background?.accentColor\"\n          [style.color]=\"reschInvalid ? null : contrastColor\"\n          (click)=\"confirmReschedule()\"\n        >\n          {{reschConfirming ? 'Confirming\u2026' : 'Confirm new slot'}}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"cancelConfirmOpen\" (click)=\"closeCancelConfirm()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Cancel this booking?</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeCancelConfirm()\">&times;</button>\n      </div>\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-policy-text\">This can't be undone.</div>\n        <div class=\"mb-policy\" *ngIf=\"cancellationPolicy\">\n          <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n          <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n        </div>\n      </div>\n      <div class=\"mb-resch-footer\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeCancelConfirm()\">Keep booking</button>\n        <button type=\"button\" class=\"mb-resch-confirm\" [disabled]=\"cancelling\" (click)=\"cancelBooking()\">\n          {{cancelling ? 'Cancelling\u2026' : 'Yes, cancel booking'}}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"addServicePanelOpen\" (click)=\"closeAddServicePanel()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Add service(s)</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeAddServicePanel()\">&times;</button>\n      </div>\n\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"addServiceLoading\">Loading services\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!addServiceLoading && addServiceOptions.length === 0\">\n          No services available to add right now.\n        </div>\n\n        <div class=\"mb-addsvc-list\" *ngIf=\"!addServiceLoading && addServiceOptions.length\">\n          <button\n            type=\"button\"\n            class=\"mb-addsvc-row\"\n            [class.selected]=\"isAddServiceSelected(service)\"\n            *ngFor=\"let service of addServiceOptions\"\n            [disabled]=\"addServiceSubmitting\"\n            (click)=\"toggleAddService(service)\"\n          >\n            <input type=\"checkbox\" class=\"mb-addsvc-checkbox\" [checked]=\"isAddServiceSelected(service)\" (click)=\"$event.stopPropagation()\" (change)=\"toggleAddService(service)\" />\n            <div class=\"f1\">\n              <div class=\"mb-addsvc-name\">\n                {{service.name}}\n                <span class=\"mb-addsvc-meta\" *ngIf=\"service.duration\">{{service.duration}} min</span>\n              </div>\n            </div>\n            <div class=\"mb-addsvc-price\" *ngIf=\"service.priceDetails?.totalPrice\">\u20B9{{service.priceDetails.totalPrice}}</div>\n          </button>\n        </div>\n\n        <div class=\"mb-addsvc-total\" *ngIf=\"addServiceSelected.length && addServiceTotalDeposit > 0\">\n          Deposit due now: \u20B9{{addServiceTotalDeposit}}\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"addServiceError\">{{addServiceError}}</div>\n      </div>\n\n      <div class=\"mb-resch-footer\" *ngIf=\"!addServiceLoading && addServiceOptions.length\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeAddServicePanel()\">Cancel</button>\n        <button\n          type=\"button\"\n          class=\"mb-resch-confirm\"\n          [disabled]=\"!addServiceSelected.length || addServiceSubmitting\"\n          [style.background]=\"!addServiceSelected.length ? null : styles?.background?.accentColor\"\n          [style.color]=\"!addServiceSelected.length ? null : contrastColor\"\n          (click)=\"addService()\"\n        >\n          {{addServiceSubmitting ? 'Adding\u2026' : 'Add ' + (addServiceSelected.length || '') + ' service' + (addServiceSelected.length === 1 ? '' : 's')}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.status-ongoing{background:#e3f2fd;color:#1565c0}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}.mb-actions-row{display:flex;gap:12px}.mb-actions-row .mb-reschedule-btn,.mb-actions-row .mb-cancel-btn{flex:1}.mb-reschedule-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-reschedule-btn:disabled{opacity:.5;cursor:not-allowed}.mb-resch-backdrop{position:fixed;inset:0;background:#1b243673;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.mb-resch-panel{width:100%;max-width:440px;max-height:85vh;border-radius:14px;background:#fff;box-shadow:0 20px 50px #14141e40;display:flex;flex-direction:column;overflow:hidden}.mb-resch-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #F0ECE7;flex:none}.mb-resch-body{padding:18px 20px;overflow-y:auto}.mb-resch-footer{display:flex;gap:10px;padding:14px 20px;border-top:1px solid #F0ECE7;flex:none}.mb-resch-footer .mb-resch-cancel,.mb-resch-footer .mb-resch-confirm{flex:1}.mb-resch-cancel{height:46px;border:1.5px solid #E2E2E9;border-radius:8px;background:#fff;color:#5f6b7c;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-title{font-size:14px;font-weight:600;color:#1b2436}.mb-resch-close{border:none;background:none;font-size:18px;color:#8a94a3;cursor:pointer;line-height:1;width:max-content}.mb-resch-daystrip-row{display:flex;align-items:center;gap:4px;margin-bottom:14px}.mb-resch-daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}.mb-resch-daystrip::-webkit-scrollbar{height:5px}.mb-resch-daystrip::-webkit-scrollbar-thumb{background:#eee9e3;border-radius:999px}.mb-resch-nav{flex:none;width:26px!important;height:26px;border:1px solid #EEE9E3;border-radius:999px;background:#fff;color:#8a94a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.mb-resch-nav:hover{border-color:#7c3a11;color:#7c3a11}.mb-resch-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:50px!important;padding:8px 0;border:1px solid #EEE9E3;border-radius:10px;background:#fff;cursor:pointer}.mb-resch-day:hover{border-color:#7c3a11}.mb-resch-day-dow{font-size:10.5px;color:#8a94a3;text-transform:uppercase}.mb-resch-day-num{font-size:13.5px;font-weight:600;color:#1b2436}.mb-resch-slots-loading,.mb-resch-slots-empty{font-size:12.5px;color:#8a94a3;margin-bottom:14px}.mb-resch-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mb-resch-slot{padding:9px 6px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;font-size:12.5px!important;color:#1b2436;cursor:pointer}.mb-resch-error{margin-top:14px;font-size:12.5px;color:#b4432e}.mb-addsvc-list{display:flex;flex-direction:column;gap:8px}.mb-addsvc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-addsvc-row.selected{background:#f6f2fc;border-color:#6d28d9}.mb-addsvc-row:disabled{opacity:.6;cursor:default}.mb-addsvc-checkbox{flex:none;width:16px;height:16px;cursor:pointer}.mb-addsvc-row .f1{flex:1}.mb-addsvc-name{font-size:13px;color:#1b2436}.mb-addsvc-meta{display:block;font-size:11.5px;color:#8a94a3;margin-top:2px}.mb-addsvc-price{font-size:13px;font-weight:600;color:#1b2436;flex:none}.mb-addsvc-total{margin-top:12px;font-size:12.5px;font-weight:600;color:#1b2436}.mb-resch-confirm{height:46px;border:none;border-radius:8px;background:#94a3b8;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-confirm:disabled{opacity:.5;cursor:not-allowed}\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: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MyBookingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-my-bookings', standalone: true, imports: [CommonModule, MatIconModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n  <ng-container *ngIf=\"currentTab === 'LIST'\">\n    <div class=\"mb-title\">My Bookings</div>\n\n    <div class=\"mb-tabs\">\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n    </div>\n\n    <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n    <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n      <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n        <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n        <div class=\"mb-row-info\">\n          <div class=\"mb-row-top\">\n            <div class=\"mb-row-title\">{{title(b)}}</div>\n          </div>\n          <div class=\"mb-row-when\">{{when(b)}}</div>\n          <div class=\"mb-row-detail\">{{detail(b)}}</div>\n        </div>\n        <div class=\"mb-row-end\">\n          <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n        </div>\n      </button>\n    </div>\n\n    <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n      <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n      <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n    <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n      <mat-icon>arrow_back</mat-icon> Back to My Bookings\n    </button>\n\n    <div class=\"mb-detail-card\">\n      <div class=\"mb-detail-header\">\n        <div class=\"mb-detail-title-row\">\n          <div class=\"mb-detail-title\">{{title(selected)}}</div>\n          <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n        </div>\n        <div class=\"mb-detail-when\">{{when(selected)}}</div>\n      </div>\n\n      <div class=\"mb-detail-rows\">\n        <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n          <div class=\"mb-detail-k\">Services</div>\n          <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n          <div class=\"mb-detail-k\">Products</div>\n          <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n          <div class=\"mb-detail-k\">Contact</div>\n          <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n          <div class=\"mb-detail-k\">Address</div>\n          <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n          <div class=\"mb-detail-k\">Service price</div>\n          <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n          <div class=\"mb-detail-k\">Home visit charge</div>\n          <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Total</div>\n          <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Paid</div>\n          <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n          <div class=\"mb-detail-k\">Pending at appointment</div>\n          <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n        </div>\n      </div>\n\n      <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n        <mat-icon>videocam</mat-icon>\n        <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n      </div>\n\n      <div class=\"mb-policy\" *ngIf=\"canRescheduleSelected\">\n        <div class=\"mb-policy-title\">Reschedule policy</div>\n        <div class=\"mb-policy-text\">You can reschedule this booking up to {{rescheduleCutoffHours}} hour{{rescheduleCutoffHours === 1 ? '' : 's'}} before the appointment time.</div>\n      </div>\n      <div class=\"mb-policy\" *ngIf=\"canCancelSelected && cancellationPolicy\">\n        <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n        <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n      </div>\n\n      <div class=\"mb-actions-row\" *ngIf=\"selected.status === 'BOOKED' || canCancelSelected\">\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          *ngIf=\"selected.status === 'BOOKED'\"\n          [disabled]=\"!canRescheduleSelected\"\n          [title]=\"!canRescheduleSelected ? selected.rescheduleBlockedReason : ''\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openReschedulePanel()\"\n        >Reschedule booking</button>\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          *ngIf=\"canAddServiceSelected\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openAddServicePanel()\"\n        >Add service</button>\n        <button\n          type=\"button\"\n          class=\"mb-cancel-btn\"\n          *ngIf=\"canCancelSelected\"\n          [disabled]=\"cancelling\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openCancelConfirm()\"\n        >\n          {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n        </button>\n      </div>\n\n      <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n    </div>\n  </ng-container>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"reschedulePanelOpen\" (click)=\"closeReschedulePanel()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Choose a new date &amp; time</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeReschedulePanel()\">&times;</button>\n      </div>\n\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-resch-daystrip-row\">\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(-1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"></path></svg>\n          </button>\n          <div class=\"mb-resch-daystrip\" #reschDayStrip>\n            <button\n              type=\"button\"\n              class=\"mb-resch-day\"\n              *ngFor=\"let day of reschDays\"\n              [class.active]=\"day.iso === reschSelectedIso\"\n              [style.background]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              [style.borderColor]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              (click)=\"selectReschDay(day)\"\n            >\n              <span class=\"mb-resch-day-dow\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.dow}}</span>\n              <span class=\"mb-resch-day-num\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.num}}</span>\n            </button>\n          </div>\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>\n          </button>\n        </div>\n\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"reschLoadingSlots\">Loading available times\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!reschLoadingSlots && reschNoSlots\">No slots available on this date. Try another date.</div>\n        <div class=\"mb-resch-slots\" *ngIf=\"!reschLoadingSlots && reschSlots.length\">\n          <button\n            type=\"button\"\n            class=\"mb-resch-slot\"\n            *ngFor=\"let slot of reschSlots\"\n            [class.active]=\"slot === reschSelectedTime\"\n            [style.background]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.borderColor]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.color]=\"slot === reschSelectedTime ? contrastColor : null\"\n            (click)=\"selectReschTime(slot)\"\n          >{{slot}}</button>\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"reschError\">{{reschError}}</div>\n      </div>\n\n      <div class=\"mb-resch-footer\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeReschedulePanel()\">Cancel</button>\n        <button\n          type=\"button\"\n          class=\"mb-resch-confirm\"\n          [disabled]=\"reschInvalid\"\n          [style.background]=\"reschInvalid ? null : styles?.background?.accentColor\"\n          [style.color]=\"reschInvalid ? null : contrastColor\"\n          (click)=\"confirmReschedule()\"\n        >\n          {{reschConfirming ? 'Confirming\u2026' : 'Confirm new slot'}}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"cancelConfirmOpen\" (click)=\"closeCancelConfirm()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Cancel this booking?</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeCancelConfirm()\">&times;</button>\n      </div>\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-policy-text\">This can't be undone.</div>\n        <div class=\"mb-policy\" *ngIf=\"cancellationPolicy\">\n          <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n          <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n        </div>\n      </div>\n      <div class=\"mb-resch-footer\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeCancelConfirm()\">Keep booking</button>\n        <button type=\"button\" class=\"mb-resch-confirm\" [disabled]=\"cancelling\" (click)=\"cancelBooking()\">\n          {{cancelling ? 'Cancelling\u2026' : 'Yes, cancel booking'}}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"addServicePanelOpen\" (click)=\"closeAddServicePanel()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Add service(s)</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeAddServicePanel()\">&times;</button>\n      </div>\n\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"addServiceLoading\">Loading services\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!addServiceLoading && addServiceOptions.length === 0\">\n          No services available to add right now.\n        </div>\n\n        <div class=\"mb-addsvc-list\" *ngIf=\"!addServiceLoading && addServiceOptions.length\">\n          <button\n            type=\"button\"\n            class=\"mb-addsvc-row\"\n            [class.selected]=\"isAddServiceSelected(service)\"\n            *ngFor=\"let service of addServiceOptions\"\n            [disabled]=\"addServiceSubmitting\"\n            (click)=\"toggleAddService(service)\"\n          >\n            <input type=\"checkbox\" class=\"mb-addsvc-checkbox\" [checked]=\"isAddServiceSelected(service)\" (click)=\"$event.stopPropagation()\" (change)=\"toggleAddService(service)\" />\n            <div class=\"f1\">\n              <div class=\"mb-addsvc-name\">\n                {{service.name}}\n                <span class=\"mb-addsvc-meta\" *ngIf=\"service.duration\">{{service.duration}} min</span>\n              </div>\n            </div>\n            <div class=\"mb-addsvc-price\" *ngIf=\"service.priceDetails?.totalPrice\">\u20B9{{service.priceDetails.totalPrice}}</div>\n          </button>\n        </div>\n\n        <div class=\"mb-addsvc-total\" *ngIf=\"addServiceSelected.length && addServiceTotalDeposit > 0\">\n          Deposit due now: \u20B9{{addServiceTotalDeposit}}\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"addServiceError\">{{addServiceError}}</div>\n      </div>\n\n      <div class=\"mb-resch-footer\" *ngIf=\"!addServiceLoading && addServiceOptions.length\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeAddServicePanel()\">Cancel</button>\n        <button\n          type=\"button\"\n          class=\"mb-resch-confirm\"\n          [disabled]=\"!addServiceSelected.length || addServiceSubmitting\"\n          [style.background]=\"!addServiceSelected.length ? null : styles?.background?.accentColor\"\n          [style.color]=\"!addServiceSelected.length ? null : contrastColor\"\n          (click)=\"addService()\"\n        >\n          {{addServiceSubmitting ? 'Adding\u2026' : 'Add ' + (addServiceSelected.length || '') + ' service' + (addServiceSelected.length === 1 ? '' : 's')}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.status-ongoing{background:#e3f2fd;color:#1565c0}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}.mb-actions-row{display:flex;gap:12px}.mb-actions-row .mb-reschedule-btn,.mb-actions-row .mb-cancel-btn{flex:1}.mb-reschedule-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-reschedule-btn:disabled{opacity:.5;cursor:not-allowed}.mb-resch-backdrop{position:fixed;inset:0;background:#1b243673;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.mb-resch-panel{width:100%;max-width:440px;max-height:85vh;border-radius:14px;background:#fff;box-shadow:0 20px 50px #14141e40;display:flex;flex-direction:column;overflow:hidden}.mb-resch-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #F0ECE7;flex:none}.mb-resch-body{padding:18px 20px;overflow-y:auto}.mb-resch-footer{display:flex;gap:10px;padding:14px 20px;border-top:1px solid #F0ECE7;flex:none}.mb-resch-footer .mb-resch-cancel,.mb-resch-footer .mb-resch-confirm{flex:1}.mb-resch-cancel{height:46px;border:1.5px solid #E2E2E9;border-radius:8px;background:#fff;color:#5f6b7c;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-title{font-size:14px;font-weight:600;color:#1b2436}.mb-resch-close{border:none;background:none;font-size:18px;color:#8a94a3;cursor:pointer;line-height:1;width:max-content}.mb-resch-daystrip-row{display:flex;align-items:center;gap:4px;margin-bottom:14px}.mb-resch-daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}.mb-resch-daystrip::-webkit-scrollbar{height:5px}.mb-resch-daystrip::-webkit-scrollbar-thumb{background:#eee9e3;border-radius:999px}.mb-resch-nav{flex:none;width:26px!important;height:26px;border:1px solid #EEE9E3;border-radius:999px;background:#fff;color:#8a94a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.mb-resch-nav:hover{border-color:#7c3a11;color:#7c3a11}.mb-resch-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:50px!important;padding:8px 0;border:1px solid #EEE9E3;border-radius:10px;background:#fff;cursor:pointer}.mb-resch-day:hover{border-color:#7c3a11}.mb-resch-day-dow{font-size:10.5px;color:#8a94a3;text-transform:uppercase}.mb-resch-day-num{font-size:13.5px;font-weight:600;color:#1b2436}.mb-resch-slots-loading,.mb-resch-slots-empty{font-size:12.5px;color:#8a94a3;margin-bottom:14px}.mb-resch-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mb-resch-slot{padding:9px 6px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;font-size:12.5px!important;color:#1b2436;cursor:pointer}.mb-resch-error{margin-top:14px;font-size:12.5px;color:#b4432e}.mb-addsvc-list{display:flex;flex-direction:column;gap:8px}.mb-addsvc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-addsvc-row.selected{background:#f6f2fc;border-color:#6d28d9}.mb-addsvc-row:disabled{opacity:.6;cursor:default}.mb-addsvc-checkbox{flex:none;width:16px;height:16px;cursor:pointer}.mb-addsvc-row .f1{flex:1}.mb-addsvc-name{font-size:13px;color:#1b2436}.mb-addsvc-meta{display:block;font-size:11.5px;color:#8a94a3;margin-top:2px}.mb-addsvc-price{font-size:13px;font-weight:600;color:#1b2436;flex:none}.mb-addsvc-total{margin-top:12px;font-size:12.5px;font-weight:600;color:#1b2436}.mb-resch-confirm{height:46px;border:none;border-radius:8px;background:#94a3b8;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-confirm:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'simpo-my-bookings', standalone: true, imports: [CommonModule, MatIconModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\"></p-toast>\n\n<div class=\"mb-root\">\n  <ng-container *ngIf=\"currentTab === 'LIST'\">\n    <div class=\"mb-title\">My Bookings</div>\n\n    <div class=\"mb-tabs\">\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'upcoming'\" (click)=\"setProfTab('upcoming')\">Upcoming</button>\n      <button type=\"button\" class=\"mb-tab\" [class.active]=\"profTab === 'past'\" (click)=\"setProfTab('past')\">Past</button>\n    </div>\n\n    <div class=\"mb-loading\" *ngIf=\"loading\">Loading your bookings\u2026</div>\n\n    <div class=\"mb-rows\" *ngIf=\"!loading && !isEmpty\">\n      <button type=\"button\" class=\"mb-row\" *ngFor=\"let b of rows\" (click)=\"viewBookingDetail(b)\">\n        <div class=\"mb-row-stripe\" [ngClass]=\"b.mode === 'HOME_VISIT' ? 'stripe-home' : b.mode === 'VIDEO_CALL' ? 'stripe-video' : 'stripe-store'\"></div>\n        <div class=\"mb-row-info\">\n          <div class=\"mb-row-top\">\n            <div class=\"mb-row-title\">{{title(b)}}</div>\n          </div>\n          <div class=\"mb-row-when\">{{when(b)}}</div>\n          <div class=\"mb-row-detail\">{{detail(b)}}</div>\n        </div>\n        <div class=\"mb-row-end\">\n          <span class=\"mb-status\" [ngClass]=\"statusClass(b.status)\">{{statusLabel(b.status)}}</span>\n        </div>\n      </button>\n    </div>\n\n    <div class=\"mb-empty\" *ngIf=\"isEmpty\">\n      <mat-icon class=\"mb-empty-icon\">event_busy</mat-icon>\n      <div class=\"mb-empty-title\">No {{profTab}} bookings yet.</div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"currentTab === 'DETAIL' && selected\">\n    <button type=\"button\" class=\"mb-back\" (click)=\"backToList()\">\n      <mat-icon>arrow_back</mat-icon> Back to My Bookings\n    </button>\n\n    <div class=\"mb-detail-card\">\n      <div class=\"mb-detail-header\">\n        <div class=\"mb-detail-title-row\">\n          <div class=\"mb-detail-title\">{{title(selected)}}</div>\n          <span class=\"mb-status\" [ngClass]=\"statusClass(selected.status)\">{{statusLabel(selected.status)}}</span>\n        </div>\n        <div class=\"mb-detail-when\">{{when(selected)}}</div>\n      </div>\n\n      <div class=\"mb-detail-rows\">\n        <div class=\"mb-detail-row\" *ngIf=\"selected.services?.length\">\n          <div class=\"mb-detail-k\">Services</div>\n          <div class=\"mb-detail-v\">{{serviceNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.productLines?.length\">\n          <div class=\"mb-detail-k\">Products</div>\n          <div class=\"mb-detail-v\">{{productNames(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.customerDetail\">\n          <div class=\"mb-detail-k\">Contact</div>\n          <div class=\"mb-detail-v\">{{selected.customerDetail?.name}} \u00B7 {{selected.customerDetail?.phoneNumber}} \u00B7 {{selected.customerDetail?.email}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.mode === 'HOME_VISIT' && selected.addressDetails\">\n          <div class=\"mb-detail-k\">Address</div>\n          <div class=\"mb-detail-v\">{{selected.addressDetails?.addressLine1}}, {{selected.addressDetails?.city}}, {{selected.addressDetails?.state}} {{selected.addressDetails?.zipCode}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"servicePriceTotal(selected) > 0\">\n          <div class=\"mb-detail-k\">Service price</div>\n          <div class=\"mb-detail-v\">\u20B9{{servicePriceTotal(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"selected.homeVisitCharge\">\n          <div class=\"mb-detail-k\">Home visit charge</div>\n          <div class=\"mb-detail-v\">\u20B9{{selected.homeVisitCharge}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Total</div>\n          <div class=\"mb-detail-v\">\u20B9{{totalDue(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\">\n          <div class=\"mb-detail-k\">Paid</div>\n          <div class=\"mb-detail-v\">{{paidLabel(selected)}}</div>\n        </div>\n        <div class=\"mb-detail-row\" *ngIf=\"pendingAmount(selected) > 0\">\n          <div class=\"mb-detail-k\">Pending at appointment</div>\n          <div class=\"mb-detail-v\">\u20B9{{pendingAmount(selected)}}</div>\n        </div>\n      </div>\n\n      <div class=\"mb-video-link\" *ngIf=\"selected.mode === 'VIDEO_CALL' && selected.videoCallLink && selected.status !== 'CANCELLED'\">\n        <mat-icon>videocam</mat-icon>\n        <a [href]=\"selected.videoCallLink\" target=\"_blank\">{{selected.videoCallLink}}</a>\n      </div>\n\n      <div class=\"mb-policy\" *ngIf=\"canRescheduleSelected\">\n        <div class=\"mb-policy-title\">Reschedule policy</div>\n        <div class=\"mb-policy-text\">You can reschedule this booking up to {{rescheduleCutoffHours}} hour{{rescheduleCutoffHours === 1 ? '' : 's'}} before the appointment time.</div>\n      </div>\n      <div class=\"mb-policy\" *ngIf=\"canCancelSelected && cancellationPolicy\">\n        <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n        <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n      </div>\n\n      <div class=\"mb-actions-row\" *ngIf=\"selected.status === 'BOOKED' || canCancelSelected\">\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          *ngIf=\"selected.status === 'BOOKED'\"\n          [disabled]=\"!canRescheduleSelected\"\n          [title]=\"!canRescheduleSelected ? selected.rescheduleBlockedReason : ''\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openReschedulePanel()\"\n        >Reschedule booking</button>\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          *ngIf=\"canAddServiceSelected\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openAddServicePanel()\"\n        >Add service</button>\n        <button\n          type=\"button\"\n          class=\"mb-cancel-btn\"\n          *ngIf=\"canCancelSelected\"\n          [disabled]=\"cancelling\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"openCancelConfirm()\"\n        >\n          {{cancelling ? 'Cancelling\u2026' : 'Cancel booking'}}\n        </button>\n      </div>\n\n      <div class=\"mb-actions-row\" *ngIf=\"selected.invoiceId && selected.status === 'COMPLETED'\">\n        <button\n          type=\"button\"\n          class=\"mb-reschedule-btn\"\n          [style.borderColor]=\"styles?.background?.accentColor\"\n          [style.color]=\"styles?.background?.accentColor\"\n          (click)=\"downloadInvoice()\"\n        >Download invoice</button>\n      </div>\n\n      <div class=\"mb-cancelled-note\" *ngIf=\"selected.status === 'CANCELLED'\">This booking has been cancelled.</div>\n    </div>\n  </ng-container>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"reschedulePanelOpen\" (click)=\"closeReschedulePanel()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Choose a new date &amp; time</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeReschedulePanel()\">&times;</button>\n      </div>\n\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-resch-daystrip-row\">\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(-1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 18l-6-6 6-6\"></path></svg>\n          </button>\n          <div class=\"mb-resch-daystrip\" #reschDayStrip>\n            <button\n              type=\"button\"\n              class=\"mb-resch-day\"\n              *ngFor=\"let day of reschDays\"\n              [class.active]=\"day.iso === reschSelectedIso\"\n              [style.background]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              [style.borderColor]=\"day.iso === reschSelectedIso ? styles?.background?.accentColor : null\"\n              (click)=\"selectReschDay(day)\"\n            >\n              <span class=\"mb-resch-day-dow\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.dow}}</span>\n              <span class=\"mb-resch-day-num\" [style.color]=\"day.iso === reschSelectedIso ? contrastColor : null\">{{day.num}}</span>\n            </button>\n          </div>\n          <button type=\"button\" class=\"mb-resch-nav\" (click)=\"scrollReschDays(1)\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"></path></svg>\n          </button>\n        </div>\n\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"reschLoadingSlots\">Loading available times\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!reschLoadingSlots && reschNoSlots\">No slots available on this date. Try another date.</div>\n        <div class=\"mb-resch-slots\" *ngIf=\"!reschLoadingSlots && reschSlots.length\">\n          <button\n            type=\"button\"\n            class=\"mb-resch-slot\"\n            *ngFor=\"let slot of reschSlots\"\n            [class.active]=\"slot === reschSelectedTime\"\n            [style.background]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.borderColor]=\"slot === reschSelectedTime ? styles?.background?.accentColor : null\"\n            [style.color]=\"slot === reschSelectedTime ? contrastColor : null\"\n            (click)=\"selectReschTime(slot)\"\n          >{{slot}}</button>\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"reschError\">{{reschError}}</div>\n      </div>\n\n      <div class=\"mb-resch-footer\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeReschedulePanel()\">Cancel</button>\n        <button\n          type=\"button\"\n          class=\"mb-resch-confirm\"\n          [disabled]=\"reschInvalid\"\n          [style.background]=\"reschInvalid ? null : styles?.background?.accentColor\"\n          [style.color]=\"reschInvalid ? null : contrastColor\"\n          (click)=\"confirmReschedule()\"\n        >\n          {{reschConfirming ? 'Confirming\u2026' : 'Confirm new slot'}}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"cancelConfirmOpen\" (click)=\"closeCancelConfirm()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Cancel this booking?</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeCancelConfirm()\">&times;</button>\n      </div>\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-policy-text\">This can't be undone.</div>\n        <div class=\"mb-policy\" *ngIf=\"cancellationPolicy\">\n          <div class=\"mb-policy-title\">{{cancellationPolicy.title}}</div>\n          <div class=\"mb-policy-text\">{{cancellationPolicy.policyDetails}}</div>\n        </div>\n      </div>\n      <div class=\"mb-resch-footer\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeCancelConfirm()\">Keep booking</button>\n        <button type=\"button\" class=\"mb-resch-confirm\" [disabled]=\"cancelling\" (click)=\"cancelBooking()\">\n          {{cancelling ? 'Cancelling\u2026' : 'Yes, cancel booking'}}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mb-resch-backdrop\" *ngIf=\"addServicePanelOpen\" (click)=\"closeAddServicePanel()\">\n    <div class=\"mb-resch-panel\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mb-resch-header\">\n        <div class=\"mb-resch-title\">Add service(s)</div>\n        <button type=\"button\" class=\"mb-resch-close\" (click)=\"closeAddServicePanel()\">&times;</button>\n      </div>\n\n      <div class=\"mb-resch-body\">\n        <div class=\"mb-resch-slots-loading\" *ngIf=\"addServiceLoading\">Loading services\u2026</div>\n        <div class=\"mb-resch-slots-empty\" *ngIf=\"!addServiceLoading && addServiceOptions.length === 0\">\n          No services available to add right now.\n        </div>\n\n        <div class=\"mb-addsvc-list\" *ngIf=\"!addServiceLoading && addServiceOptions.length\">\n          <button\n            type=\"button\"\n            class=\"mb-addsvc-row\"\n            [class.selected]=\"isAddServiceSelected(service)\"\n            *ngFor=\"let service of addServiceOptions\"\n            [disabled]=\"addServiceSubmitting\"\n            (click)=\"toggleAddService(service)\"\n          >\n            <input type=\"checkbox\" class=\"mb-addsvc-checkbox\" [checked]=\"isAddServiceSelected(service)\" (click)=\"$event.stopPropagation()\" (change)=\"toggleAddService(service)\" />\n            <div class=\"f1\">\n              <div class=\"mb-addsvc-name\">\n                {{service.name}}\n                <span class=\"mb-addsvc-meta\" *ngIf=\"service.duration\">{{service.duration}} min</span>\n              </div>\n            </div>\n            <div class=\"mb-addsvc-price\" *ngIf=\"service.priceDetails?.totalPrice\">\u20B9{{service.priceDetails.totalPrice}}</div>\n          </button>\n        </div>\n\n        <div class=\"mb-addsvc-total\" *ngIf=\"addServiceSelected.length && addServiceTotalDeposit > 0\">\n          Deposit due now: \u20B9{{addServiceTotalDeposit}}\n        </div>\n\n        <div class=\"mb-resch-error\" *ngIf=\"addServiceError\">{{addServiceError}}</div>\n      </div>\n\n      <div class=\"mb-resch-footer\" *ngIf=\"!addServiceLoading && addServiceOptions.length\">\n        <button type=\"button\" class=\"mb-resch-cancel\" (click)=\"closeAddServicePanel()\">Cancel</button>\n        <button\n          type=\"button\"\n          class=\"mb-resch-confirm\"\n          [disabled]=\"!addServiceSelected.length || addServiceSubmitting\"\n          [style.background]=\"!addServiceSelected.length ? null : styles?.background?.accentColor\"\n          [style.color]=\"!addServiceSelected.length ? null : contrastColor\"\n          (click)=\"addService()\"\n        >\n          {{addServiceSubmitting ? 'Adding\u2026' : 'Add ' + (addServiceSelected.length || '') + ' service' + (addServiceSelected.length === 1 ? '' : 's')}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".mb-root{display:flex;flex-direction:column;gap:16px;padding:4px 0 24px}.mb-title{font-size:20px;font-weight:600;color:#1b2436}.mb-tabs{display:flex;background:#f5f2ee;border-radius:8px;padding:4px;gap:4px;width:fit-content}.mb-tab{border:none;background:transparent;border-radius:6px;padding:8px 18px;font-size:13.5px;font-weight:500;color:#8a94a3;cursor:pointer}.mb-tab.active{background:#fff;color:#1b2436;font-weight:600;box-shadow:0 1px 3px #00000012}.mb-loading{font-size:13.5px;color:#8a94a3;padding:20px 0}.mb-rows{display:flex;flex-direction:column;gap:12px}.mb-row{border:1px solid #EEE9E3;border-radius:10px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-row-stripe{width:3px;align-self:stretch;border-radius:999px;flex:none}.stripe-home{background:#16233a}.stripe-video{background:#7c3a11}.stripe-store{background:#8a94a3}.mb-row-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.mb-row-title{font-size:14.5px;font-weight:600;color:#1b2436}.mb-row-when{font-size:12.5px;color:#6b7688}.mb-row-detail{font-size:12px;color:#8a94a3}.mb-row-end{flex:none}.mb-status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:999px;padding:4px 9px;white-space:nowrap}.status-confirmed{background:#e8f4ee;color:#1e7a4b}.status-completed{background:#f2eee9;color:#8a7c6c}.status-cancelled{background:#fbedec;color:#b4432e}.status-pending{background:#fdf3e3;color:#b36b00}.status-ongoing{background:#e3f2fd;color:#1565c0}.mb-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}.mb-empty-icon{font-size:40px!important;height:40px!important;width:40px!important;color:#c9b7a2!important}.mb-empty-title{font-size:14.5px;color:#8a94a3}.mb-back{display:flex;align-items:center;gap:6px;border:none;background:none;padding:0;cursor:pointer;font-size:12.5px;color:#7c3a11;margin-bottom:6px;width:fit-content}.mb-back mat-icon{font-size:16px!important;height:16px!important;width:16px!important}.mb-detail-card{border:1px solid #EEE9E3;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;background:#fff}.mb-detail-header{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid #F0ECE7}.mb-detail-title-row{display:flex;align-items:center;gap:10px}.mb-detail-title{font-size:17px;font-weight:600;color:#1b2436}.mb-detail-when{font-size:13px;color:#6b7688}.mb-detail-rows{display:flex;flex-direction:column;gap:12px}.mb-detail-row{display:flex;justify-content:space-between;gap:16px;font-size:13px}.mb-detail-k{color:#8a94a3;flex:none}.mb-detail-v{color:#1b2436;font-weight:500;text-align:right}.mb-video-link{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f2f9f5;border-radius:8px;font-size:13px;color:#2c6a4b}.mb-video-link mat-icon{color:#1e7a4b!important;flex:none}.mb-policy{background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.mb-policy-title{font-size:12px;font-weight:600;color:#a08b72;text-transform:uppercase;letter-spacing:.06em}.mb-policy-text{font-size:12.5px;line-height:1.6;color:#5f6b7c}.mb-cancel-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.mb-cancelled-note{font-size:13px;color:#b4432e;font-weight:600}.mb-actions-row{display:flex;gap:12px}.mb-actions-row .mb-reschedule-btn,.mb-actions-row .mb-cancel-btn{flex:1}.mb-reschedule-btn{height:46px;border:1.5px solid;border-radius:8px;background:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-reschedule-btn:disabled{opacity:.5;cursor:not-allowed}.mb-resch-backdrop{position:fixed;inset:0;background:#1b243673;display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}.mb-resch-panel{width:100%;max-width:440px;max-height:85vh;border-radius:14px;background:#fff;box-shadow:0 20px 50px #14141e40;display:flex;flex-direction:column;overflow:hidden}.mb-resch-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #F0ECE7;flex:none}.mb-resch-body{padding:18px 20px;overflow-y:auto}.mb-resch-footer{display:flex;gap:10px;padding:14px 20px;border-top:1px solid #F0ECE7;flex:none}.mb-resch-footer .mb-resch-cancel,.mb-resch-footer .mb-resch-confirm{flex:1}.mb-resch-cancel{height:46px;border:1.5px solid #E2E2E9;border-radius:8px;background:#fff;color:#5f6b7c;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-title{font-size:14px;font-weight:600;color:#1b2436}.mb-resch-close{border:none;background:none;font-size:18px;color:#8a94a3;cursor:pointer;line-height:1;width:max-content}.mb-resch-daystrip-row{display:flex;align-items:center;gap:4px;margin-bottom:14px}.mb-resch-daystrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}.mb-resch-daystrip::-webkit-scrollbar{height:5px}.mb-resch-daystrip::-webkit-scrollbar-thumb{background:#eee9e3;border-radius:999px}.mb-resch-nav{flex:none;width:26px!important;height:26px;border:1px solid #EEE9E3;border-radius:999px;background:#fff;color:#8a94a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.mb-resch-nav:hover{border-color:#7c3a11;color:#7c3a11}.mb-resch-day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:50px!important;padding:8px 0;border:1px solid #EEE9E3;border-radius:10px;background:#fff;cursor:pointer}.mb-resch-day:hover{border-color:#7c3a11}.mb-resch-day-dow{font-size:10.5px;color:#8a94a3;text-transform:uppercase}.mb-resch-day-num{font-size:13.5px;font-weight:600;color:#1b2436}.mb-resch-slots-loading,.mb-resch-slots-empty{font-size:12.5px;color:#8a94a3;margin-bottom:14px}.mb-resch-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mb-resch-slot{padding:9px 6px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;font-size:12.5px!important;color:#1b2436;cursor:pointer}.mb-resch-error{margin-top:14px;font-size:12.5px;color:#b4432e}.mb-addsvc-list{display:flex;flex-direction:column;gap:8px}.mb-addsvc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid #EEE9E3;border-radius:8px;background:#fff;cursor:pointer;text-align:left;width:100%}.mb-addsvc-row.selected{background:#f6f2fc;border-color:#6d28d9}.mb-addsvc-row:disabled{opacity:.6;cursor:default}.mb-addsvc-checkbox{flex:none;width:16px;height:16px;cursor:pointer}.mb-addsvc-row .f1{flex:1}.mb-addsvc-name{font-size:13px;color:#1b2436}.mb-addsvc-meta{display:block;font-size:11.5px;color:#8a94a3;margin-top:2px}.mb-addsvc-price{font-size:13px;font-weight:600;color:#1b2436;flex:none}.mb-addsvc-total{margin-top:12px;font-size:12.5px;font-weight:600;color:#1b2436}.mb-resch-confirm{height:46px;border:none;border-radius:8px;background:#94a3b8;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.mb-resch-confirm:disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], reschDayStripRef: [{
@@ -24582,8 +25019,7 @@ class FeaturedCollectionComponent extends BaseSection {
             moveItemInArray(this.responseData, startIdx, endIdx);
     }
     redirectToListPage(collection) {
-        collection = collection.collectionName;
-        this.router.navigate(['/list'], { queryParams: { collections: collection } });
+        this.router.navigate(listPath({ collection }));
     }
     get stylesLayout() {
         return { ...this.styles?.layout };
@@ -24611,7 +25047,7 @@ class FeaturedCollectionComponent extends BaseSection {
         return this.styles?.layout?.align || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedCollectionComponent, deps: [{ token: i2$2.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCollectionComponent, isStandalone: true, selector: "simpo-featured-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "categoryParent", first: true, predicate: ["categoryParent1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\n      <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\n        [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\n          [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\n          [simpoAnimation]=\"styles?.animation\">\n          <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n            <ng-container *ngIf=\"edit || item.value\">\n              <div class=\"pt-3 w-100\">\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n              </div>\n            </ng-container>\n            <!-- </div> -->\n          </div>\n          <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\n            <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\n              [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\n              [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\n              <div\n                *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                (click)=\"redirectToListPage(data.categoryName)\" class=\"d-flex flex-column align-items-center w-fit-content\"\n                [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\n                <img  [simpoCorner]=\"styles?.corners\"\n                  [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\n                  onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\n                <div *ngIf=\"content?.display?.showHeading\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\n                <!-- class=\"category-name body-large\"  -->\n              </div>\n            </div>\n          </ng-container>\n          <ng-template #categoryStyle2>\n            <div class=\"w-100\">\n              <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\n                [content]=\"content\"></simpo-categories-with-image-background-columns>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\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: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedCollectionComponent, isStandalone: true, selector: "simpo-featured-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "categoryParent", first: true, predicate: ["categoryParent1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\n      <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\n        [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\n          [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\n          [simpoAnimation]=\"styles?.animation\">\n          <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n            <ng-container *ngIf=\"edit || item.value\">\n              <div class=\"pt-3 w-100\">\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n              </div>\n            </ng-container>\n            <!-- </div> -->\n          </div>\n          <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\n            <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\n              [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\n              [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\n              <div\n                *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\n                [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\n                <img  [simpoCorner]=\"styles?.corners\"\n                  [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\n                  onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\n                <div *ngIf=\"content?.display?.showHeading\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\n                <!-- class=\"category-name body-large\"  -->\n              </div>\n            </div>\n          </ng-container>\n          <ng-template #categoryStyle2>\n            <div class=\"w-100\">\n              <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\n                [content]=\"content\"></simpo-categories-with-image-background-columns>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\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: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "component", type: CategoriesWithImageBackgroundColumnsComponent, selector: "simpo-categories-with-image-background-columns", inputs: ["responseData", "styles", "content"] }] }); }
 }
@@ -24635,7 +25071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextEditorComponent,
                         SpacingAroundDirective,
                         CategoriesWithImageBackgroundColumnsComponent
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\n      <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\n        [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\n          [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\n          [simpoAnimation]=\"styles?.animation\">\n          <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n            <ng-container *ngIf=\"edit || item.value\">\n              <div class=\"pt-3 w-100\">\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n              </div>\n            </ng-container>\n            <!-- </div> -->\n          </div>\n          <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\n            <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\n              [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\n              [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\n              <div\n                *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                (click)=\"redirectToListPage(data.categoryName)\" class=\"d-flex flex-column align-items-center w-fit-content\"\n                [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\n                <img  [simpoCorner]=\"styles?.corners\"\n                  [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\n                  onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\n                <div *ngIf=\"content?.display?.showHeading\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\n                <!-- class=\"category-name body-large\"  -->\n              </div>\n            </div>\n          </ng-container>\n          <ng-template #categoryStyle2>\n            <div class=\"w-100\">\n              <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\n                [content]=\"content\"></simpo-categories-with-image-background-columns>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"container-fluid total-container p-0\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [attr.style]=\"customClass\">\n    <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\" class=\"border-radius-unset\">\n      <div [id]=\"data?.id\" #mainContainer [simpoAnimation]=\"styles?.animation\" [simpoBackground]=\"styles?.background\"\n        [simpoCorner]=\"styles?.corners\" class=\"d-flex w-100\">\n        <div class=\"d-flex flex-column w-100\" [simpoOverlay]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\n          [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\"\n          [simpoAnimation]=\"styles?.animation\">\n          <div *ngFor=\"let item of content?.inputText\" class=\"text-container\">\n            <!-- <div  class = \"content-side\"[innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\n            <ng-container *ngIf=\"edit || item.value\">\n              <div class=\"pt-3 w-100\">\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\n              </div>\n            </ng-container>\n            <!-- </div> -->\n          </div>\n          <ng-container *ngIf=\"styles?.componentStyle === 'Style1';else categoryStyle2\">\n            <div class=\"category-parent\" [ngClass]=\"{'flex-wrap': getDirection == 'COLUMN'}\"\n              [simpoContainerAlignment]=\"styles?.layout\" [id]=\"data?.id\"\n              [style.justifyContent]=\"!isMobile ? getJustifyContent() : ''\" #categoryParent1>\n              <div\n                *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\n                (click)=\"redirectToListPage(data)\" class=\"d-flex flex-column align-items-center w-fit-content\"\n                [ngClass]=\"{ 'w-48 d-flex flex-column align-items-center' : isMobile}\">\n                <img  [simpoCorner]=\"styles?.corners\"\n                  [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\" loading=\"lazy\"\n                  onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n                  [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n                  class=\"category-image\" [ngClass]=\"{'category-new-image' : isMobile && getDirection == 'COLUMN'}\">\n                <div *ngIf=\"content?.display?.showHeading\"\n                  [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\">{{data.categoryName}}</div>\n                <!-- class=\"category-name body-large\"  -->\n              </div>\n            </div>\n          </ng-container>\n          <ng-template #categoryStyle2>\n            <div class=\"w-100\">\n              <simpo-categories-with-image-background-columns [responseData]=\"responseData\" [styles]=\"styles\"\n                [content]=\"content\"></simpo-categories-with-image-background-columns>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>", styles: [".mt-15{margin-top:15px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-container{min-width:100px}.w-fit-content{width:fit-content!important}.total-container{height:fit-content!important;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.category-parent{padding:25px 0% 2%;display:flex;width:100%;max-width:100%;gap:25px;overflow-x:scroll;font-size:16px!important;cursor:pointer}.hovering-effect:hover{font-size:22px!important;transition:.3s ease-in-out}.category-image{display:flex;flex-wrap:wrap;margin-bottom:15px;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.category-image:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}.border-radius-unset{border-radius:unset!important}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important}.w-48{width:48%!important}.category-new-image{height:150px!important;width:100%!important}.header{gap:7px}.category-parent{gap:8px;margin-top:15px;padding-left:0!important;padding-right:0!important;padding-top:0!important}.category-parent::-webkit-scrollbar{display:flex!important;height:3px}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.Router }, { type: RestService }, { type: EventsService }], propDecorators: { categoryParent: [{
                 type: ViewChild,
                 args: ['categoryParent1', { static: false }]
@@ -24701,8 +25137,7 @@ class NewCollectionComponent extends BaseSection {
             moveItemInArray(this.responseData, startIdx, endIdx);
     }
     redirectToListPage(collection) {
-        collection = collection.collectionId;
-        this.router.navigate(['/list'], { queryParams: { collectionId: collection } });
+        this.router.navigate(listPath({ collection }));
     }
     get stylesLayout() {
         return { ...this.styles?.layout };