simpo-component-library 3.7.1 → 3.7.4

package/fesm2022/simpo-component-library.mjs

@@ -28,7 +28,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i7 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import * as i1$1 from '@angular/common/http';
-import { HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
 import * as i2$1 from 'ngx-cookie-service';
 import * as i2$2 from '@angular/router';
 import { NavigationEnd, RouterLink } from '@angular/router';
@@ -2873,29 +2873,30 @@ class RestService {
             .get(this.BASE_URL + `ecommerce/inventory/${businessId}/brand`)
             .pipe(map((response) => (response.data ?? response)?.map((brand) => new Brand(brand))));
     }
-    // GET product/custom-field/query-options. Returns sorts + filter groups for the sidebar.
+    // 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.
-    // The server scopes by id when both an id and a slug are sent.
-    getFilterOptions(categoryId, collectionId, categorySlugName, collectionSlugName) {
+    getFilterOptions(scope = {}) {
         const businessId = this.storage.getItem('bId') ?? this.storage.getItem('businessId') ?? '';
-        let params = new HttpParams().set('businessId', businessId);
-        if (categoryId)
-            params = params.set('categoryId', categoryId);
-        if (collectionId)
-            params = params.set('collectionId', collectionId);
-        if (categorySlugName)
-            params = params.set('categorySlugName', categorySlugName);
-        if (collectionSlugName)
-            params = params.set('collectionSlugName', collectionSlugName);
+        const body = {
+            businessId,
+            categoryIds: scope.categoryIds ?? [],
+            collectionIds: scope.collectionIds ?? [],
+            categorySlugNames: scope.categorySlugNames ?? [],
+            collectionSlugNames: scope.collectionSlugNames ?? [],
+        };
         return this.http
-            .get(this.BASE_URL + 'ecommerce/product/custom-field/query-options', {
-            params,
-        })
-            .pipe(map((response) => ({
-            sorts: response.data?.sorts ?? [],
-            groups: response.data?.groups ?? [],
-            filters: response.data?.filters ?? [],
-        })));
+            .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();
@@ -2920,8 +2921,8 @@ class RestService {
             payload['minRating'] = minRating;
         if (maxRating > 0)
             payload['maxRating'] = maxRating;
-        // The server does not apply custom-field filters on jewellery listings.
-        if (!this.isJewellery && extra.customFieldFilters?.length)
+        // 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;
@@ -20386,7 +20387,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\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div> -->\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n      [simpoLayout]=\"styles?.layout\" #container>\r\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div> -->\r\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\r\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\r\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\r\n          <div class=\"product-hero-card-modern\">\r\n            <ng-container *ngIf=\"isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\r\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\r\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <!-- Moved descriptors to Details tab below -->\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <!-- Moved tags to Details tab below -->\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <!-- Tabs Navigation -->\r\n      <div class=\"product-tabs-container\">\r\n        <ul class=\"tabs-list\">\r\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\r\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Details')\">Details</li>\r\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\r\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Reviews')\">Reviews</li>\r\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\r\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\r\n        </ul>\r\n      </div>\r\n\r\n      <!-- Tab Content -->\r\n      <div class=\"tab-content-pane\">\r\n        <div *ngIf=\"activeTab == 'Details'\">\r\n          <!-- Integrated descriptors and tags here -->\r\n          <div class=\"mt-2\">\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"activeTab == 'Reviews'\">\r\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\r\n          <div class=\"pb-glass-container mt-2\">\r\n\r\n            <!-- One card per material \u2014 generic, works for any material type -->\r\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n              <div class=\"pb-glass-card\">\r\n                <div class=\"pb-glass-header\"\r\n                     [style.background]=\"styles?.background?.accentColor\"\r\n                     [style.color]=\"'#fff'\">\r\n                  {{ ele?.materialName | titlecase }}\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Purity</span>\r\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Net Weight</span>\r\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\r\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Value</span>\r\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <!-- Making Charges card -->\r\n            <div class=\"pb-glass-card\">\r\n              <div class=\"pb-glass-header\"\r\n                   [style.background]=\"styles?.background?.accentColor\"\r\n                   [style.color]=\"'#fff'\">\r\n                Making Charges\r\n              </div>\r\n              <!-- <div class=\"pb-glass-row\">\r\n                <span class=\"pb-label\">Net Weight</span>\r\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\r\n              </div> -->\r\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\r\n                <span class=\"pb-label\">Making Charge %</span>\r\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\r\n              </div>\r\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\r\n                <span class=\"pb-label\">Value</span>\r\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Summary card -->\r\n            <div class=\"pb-summary-card\">\r\n              <div class=\"pb-summary-row\">\r\n                <span>Total Value</span>\r\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\r\n              </div>\r\n              <div class=\"pb-summary-row\">\r\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\r\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\r\n              </div>\r\n              <div class=\"pb-grand-total\"\r\n                   [style.background]=\"styles?.background?.accentColor\"\r\n                   [style.color]=\"'#fff'\">\r\n                <span>TOTAL</span>\r\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container> -->\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n    [id]=\"data?.id+getButtonId(0)\">Out of\r\n    Stock</button>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\r\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n  </div>\r\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\r\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\">Out of\r\n      Stock</button>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n    </div>\r\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\r\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n          message</mat-icon>Notify Me</button>\r\n    </div>\r\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-3\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n    <ng-container>\r\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-semibold\">\r\n            {{item.value |\r\n            titlecase}}</div>\r\n        </div>\r\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"product-info-minimal\">\r\n    <!-- Brand -->\r\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\r\n      <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\r\n    </div>\r\n\r\n    <!-- Item Code -->\r\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\r\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\r\n    </div>\r\n\r\n    <!-- Title and Price Row -->\r\n    <div class=\"title-price-row-modern\">\r\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\r\n      <div class=\"product-price-modern\">\r\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\r\n          number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Rating Row -->\r\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\r\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n      <span class=\"separator\">|</span>\r\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\r\n        {{responseData?.totalReviewCount}} reviews</span>\r\n    </div>\r\n\r\n    <!-- Brief Description -->\r\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc mt-2\">\r\n    <div>\r\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\r\n          [style.background]=\"data?.styles?.background?.accentColor\"\r\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n          <mat-icon>add</mat-icon> PRICE BREAKUP\r\n        </div>\r\n      </div> -->\r\n      <div class=\"description\">\r\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\r\n          [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <div class=\"custom-specifications\" style=\"margin-top: 16px;\" *ngIf=\"customFieldSpecs.length\">\r\n        <div class=\"body-large\" style=\"font-weight: 600; margin-bottom: 8px;\">Specifications</div>\r\n        <div class=\"d-flex\" style=\"gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08);\"\r\n          *ngFor=\"let spec of customFieldSpecs\">\r\n          <span style=\"flex: 0 0 40%; opacity: 0.7;\">{{ spec.label }}</span>\r\n          <span style=\"flex: 1;\">{{ spec.value }}</span>\r\n        </div>\r\n      </div>\r\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\r\n        <div class=\"jewellery-table-container\">\r\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n            <div class=\"jewel-container mt-2\">\r\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\r\n                {{ele?.materialName | titlecase}}\r\n              </div>\r\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/{{ele?.unit | titlecase}}\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.purity |\r\n                    titlecase}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container> -->\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\r\n      <div class=\"main-image-container p-0\">\r\n        <div class=\"item-img rounded-3\">\r\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\r\n          </lib-ngx-image-zoom>\r\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\r\n            class=\"w-100 h-100 object-fit-cover\">\r\n        </div>\r\n      </div>\r\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\r\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\r\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\r\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"bento-masonry-container\">\r\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\r\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"row w-100\">\r\n    <ng-container *ngFor=\"let brand of brandPromises\">\r\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\r\n        <div class=\"brand-text w-100 text-center py-2\">\r\n          {{brand?.title | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\r\n  <ng-container>\r\n    <div class=\"row w-100 video-container\">\r\n      <div class=\"col-4 video-call-img\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\r\n          alt=\"\" class=\"w-100 h-100 \">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\">\r\n        <div class=\"video-head-text\">\r\n          Live Video Call\r\n        </div>\r\n        <div class=\"sub-text\">\r\n          Join a live video call with our consultants to see your favourite designs up close!\r\n        </div>\r\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n          Schedule a Video Call\r\n        </button>\r\n        <ng-container *ngIf=\"videoCallAdded\">\r\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\r\n            <mat-icon>check_circle</mat-icon>\r\n            <span>Added to your Video Call request</span>\r\n          </div>\r\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n            [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\r\n            [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\r\n            Booking</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n  <div class=\"delivery-container\">\r\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section mb-2\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n        [style.borderColor]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\r\n          <div class=\"d-flex mx-1\"><mat-icon\r\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\r\n            style=\"width: 100%;\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\r\n      <!-- Free Delivery Section -->\r\n      <div class=\"delivery-section\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"delivery-icon d-flex align-items-center\">\r\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\r\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\r\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\r\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\r\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\r\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\r\n            </svg>\r\n          </span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\r\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            expected Order will\r\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\r\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #TryAtHome>\r\n  <!-- Try At Home Section -->\r\n  <div class=\"try-home-section\">\r\n    <div class=\"d-flex align-items-start try-home-item\">\r\n      <span class=\"home-icon d-flex align-items-center\">\r\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\r\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n        </svg>\r\n      </span>\r\n      <div class=\"try-home-details\">\r\n        <div class=\"try-home-header\">\r\n          <span class=\"try-home-text\">Try At Home</span>\r\n          <span class=\"free-text\"> (It's Free)</span>\r\n        </div>\r\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n        <!-- <div class=\"appointment-text\">\r\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n            </div> -->\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n        HOME</button>\r\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\r\n        Booking</button>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #StoreSection>\r\n  <!-- Nearest Store Section -->\r\n  <ng-container\r\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\r\n    <div class=\"store-section\">\r\n      <div class=\"d-flex align-items-center store-item\">\r\n        <span class=\"store-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </span>\r\n        <div class=\"store-details\">\r\n          <div class=\"store-text\">\r\n            <span class=\"store-label\">Nearest Store - </span>\r\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\r\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n          </div>\r\n          <!-- <div class=\"availability-section\">\r\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n            </div> -->\r\n          <!-- <div class=\"other-stores-text\">\r\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n            </div> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-center w-100\">\r\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\r\n          STORE</button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #emptyStore>\r\n    <div class=\"delivery-section\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <span class=\"delivery-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </span>\r\n        <span class=\"delivery-text\">No Stores are available</span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n  aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price px-3 pb-2\">\r\n    <div class=\"price-text\">Price</div>\r\n    <div class=\"d-flex  g-3 align-items-center\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"varient-container h-100 p-3\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"varient-data\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n    Customization</div>\r\n</div>\r\n\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price p-10-20\">\r\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n  </div>\r\n  <div class=\"price-breakup h-100 w-100\">\r\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n      <div class=\"price-container mb-3 p-10-20\">\r\n        <div class=\"price-container-header\">\r\n          {{ ele.materialType + \" BREAKUP\" }}\r\n        </div>\r\n        <div class=\"row w-100 header-row\">\r\n          <div class=\"col-3 text-center\">COMPONENT</div>\r\n          <div class=\"col-3 text-center\">RATE</div>\r\n          <div class=\"col-3 text-center\">WEIGHT</div>\r\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Making Charges</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Tax Amount</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Total Amount</div>\r\n        <div class=\"col-6 text-end total\">\r\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n          number:'1.2-2'}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\r\n\r\n    <!-- Header: Title + Average | Bar Chart -->\r\n    <div class=\"rv-header\">\r\n      <div class=\"rv-header-left\">\r\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\r\n        <div class=\"rv-average-row\">\r\n          <!-- filled stars -->\r\n          <div class=\"rv-stars\">\r\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\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\"\r\n                  fill=\"#eab308\" />\r\n              </svg>\r\n            </ng-container>\r\n          </div>\r\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n          <span class=\"rv-avg-label\">average</span>\r\n        </div>\r\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\r\n          {{responseData?.totalReviewCount | number}} Reviews\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"rv-bars\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"rv-bar-row\">\r\n            <span class=\"rv-bar-label\">{{rating}}</span>\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\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\"\r\n                fill=\"#eab308\" />\r\n            </svg>\r\n            <div class=\"rv-bar-track\">\r\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Cards Grid -->\r\n    <div class=\"rv-grid\">\r\n      <ng-container *ngFor=\"let review of reviewsData\">\r\n        <ng-container *ngIf=\"review.review\">\r\n          <div class=\"rv-card\">\r\n            <div class=\"rv-card-top\">\r\n              <div class=\"rv-reviewer\">\r\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\r\n                  class=\"rv-avatar\" alt=\"\">\r\n                <div class=\"rv-name-date\">\r\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\r\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\r\n                </div>\r\n              </div>\r\n              <!-- Star rating -->\r\n              <div class=\"rv-card-stars\">\r\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\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\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\r\n                    <path\r\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\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\r\n\r\n            <!-- Review Images -->\r\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\r\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\r\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\r\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-body\" style=\"height: 100%;\">\r\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n          <source\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n            type=\"video/mp4\">\r\n          Your browser does not support the video tag.\r\n        </video>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog review-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h1 class=\"modal-title fs-5\"></h1>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <div class=\"detail-review-container\">\r\n          <div class=\"image-section\">\r\n            <div class=\"product-image\">\r\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n              <!-- <div class=\"earbuds-container\">\r\n                <div class=\"charging-case\"></div>\r\n                <div class=\"earbud left\"></div>\r\n                <div class=\"earbud right\"></div>\r\n              </div> -->\r\n            </div>\r\n            <!-- <div class=\"navigation-arrows\">\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"review-section\">\r\n            <div class=\"reviewer-header\">\r\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n            </div>\r\n\r\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </div>\r\n\r\n            <div class=\"review-date\">\r\n              Reviewed in India on 24 July 2025\r\n            </div>\r\n\r\n            <div class=\"review-text\">\r\n              {{selectedReview?.review ?? \"-\"}}\r\n            </div>\r\n\r\n            <div class=\"images-section\">\r\n              <h3>Images in this review</h3>\r\n              <div class=\"review-images\">\r\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n                  <img [src]=\"img.imgUrl\" alt=\"\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\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\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div> -->\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n      [simpoLayout]=\"styles?.layout\" #container>\r\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div> -->\r\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\r\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\r\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\r\n          <div class=\"product-hero-card-modern\">\r\n            <ng-container *ngIf=\"isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\r\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\r\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <!-- Moved descriptors to Details tab below -->\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <!-- Moved tags to Details tab below -->\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <!-- Tabs Navigation -->\r\n      <div class=\"product-tabs-container\">\r\n        <ul class=\"tabs-list\">\r\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\r\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Details')\">Details</li>\r\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\r\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Reviews')\">Reviews</li>\r\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\r\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\r\n        </ul>\r\n      </div>\r\n\r\n      <!-- Tab Content -->\r\n      <div class=\"tab-content-pane\">\r\n        <div *ngIf=\"activeTab == 'Details'\">\r\n          <!-- Integrated descriptors and tags here -->\r\n          <div class=\"mt-2\">\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"activeTab == 'Reviews'\">\r\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\r\n          <div class=\"pb-glass-container mt-2\">\r\n\r\n            <!-- One card per material \u2014 generic, works for any material type -->\r\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n              <div class=\"pb-glass-card\">\r\n                <div class=\"pb-glass-header\"\r\n                     [style.background]=\"styles?.background?.accentColor\"\r\n                     [style.color]=\"'#fff'\">\r\n                  {{ ele?.materialName | titlecase }}\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Purity</span>\r\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Net Weight</span>\r\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\r\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Value</span>\r\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <!-- Making Charges card -->\r\n            <div class=\"pb-glass-card\">\r\n              <div class=\"pb-glass-header\"\r\n                   [style.background]=\"styles?.background?.accentColor\"\r\n                   [style.color]=\"'#fff'\">\r\n                Making Charges\r\n              </div>\r\n              <!-- <div class=\"pb-glass-row\">\r\n                <span class=\"pb-label\">Net Weight</span>\r\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\r\n              </div> -->\r\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\r\n                <span class=\"pb-label\">Making Charge %</span>\r\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\r\n              </div>\r\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\r\n                <span class=\"pb-label\">Value</span>\r\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Summary card -->\r\n            <div class=\"pb-summary-card\">\r\n              <div class=\"pb-summary-row\">\r\n                <span>Total Value</span>\r\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\r\n              </div>\r\n              <div class=\"pb-summary-row\">\r\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\r\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\r\n              </div>\r\n              <div class=\"pb-grand-total\"\r\n                   [style.background]=\"styles?.background?.accentColor\"\r\n                   [style.color]=\"'#fff'\">\r\n                <span>TOTAL</span>\r\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container> -->\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n    [id]=\"data?.id+getButtonId(0)\">Out of\r\n    Stock</button>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\r\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n  </div>\r\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\r\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\">Out of\r\n      Stock</button>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n    </div>\r\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\r\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n          message</mat-icon>Notify Me</button>\r\n    </div>\r\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-3\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n    <ng-container>\r\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-semibold\">\r\n            {{item.value |\r\n            titlecase}}</div>\r\n        </div>\r\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"product-info-minimal\">\r\n    <!-- Brand -->\r\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\r\n      <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\r\n    </div>\r\n\r\n    <!-- Item Code -->\r\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\r\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\r\n    </div>\r\n\r\n    <!-- Title and Price Row -->\r\n    <div class=\"title-price-row-modern\">\r\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\r\n      <div class=\"product-price-modern\">\r\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\r\n          number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Rating Row -->\r\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\r\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n      <span class=\"separator\">|</span>\r\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\r\n        {{responseData?.totalReviewCount}} reviews</span>\r\n    </div>\r\n\r\n    <!-- Brief Description -->\r\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc mt-2\">\r\n    <div>\r\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\r\n          [style.background]=\"data?.styles?.background?.accentColor\"\r\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n          <mat-icon>add</mat-icon> PRICE BREAKUP\r\n        </div>\r\n      </div> -->\r\n      <div class=\"description\">\r\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\r\n          [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <div class=\"custom-specifications\" *ngIf=\"customFieldSpecs.length\">\r\n        <div class=\"body-large spec-title\">Specifications</div>\r\n        <table class=\"spec-table\">\r\n          <tbody>\r\n            <tr *ngFor=\"let spec of customFieldSpecs\">\r\n              <th scope=\"row\">{{ spec.label }}</th>\r\n              <td>{{ spec.value }}</td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\r\n        <div class=\"jewellery-table-container\">\r\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n            <div class=\"jewel-container mt-2\">\r\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\r\n                {{ele?.materialName | titlecase}}\r\n              </div>\r\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/{{ele?.unit | titlecase}}\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.purity |\r\n                    titlecase}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container> -->\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\r\n      <div class=\"main-image-container p-0\">\r\n        <div class=\"item-img rounded-3\">\r\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\r\n          </lib-ngx-image-zoom>\r\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\r\n            class=\"w-100 h-100 object-fit-cover\">\r\n        </div>\r\n      </div>\r\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\r\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\r\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\r\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"bento-masonry-container\">\r\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\r\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"row w-100\">\r\n    <ng-container *ngFor=\"let brand of brandPromises\">\r\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\r\n        <div class=\"brand-text w-100 text-center py-2\">\r\n          {{brand?.title | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\r\n  <ng-container>\r\n    <div class=\"row w-100 video-container\">\r\n      <div class=\"col-4 video-call-img\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\r\n          alt=\"\" class=\"w-100 h-100 \">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\">\r\n        <div class=\"video-head-text\">\r\n          Live Video Call\r\n        </div>\r\n        <div class=\"sub-text\">\r\n          Join a live video call with our consultants to see your favourite designs up close!\r\n        </div>\r\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n          Schedule a Video Call\r\n        </button>\r\n        <ng-container *ngIf=\"videoCallAdded\">\r\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\r\n            <mat-icon>check_circle</mat-icon>\r\n            <span>Added to your Video Call request</span>\r\n          </div>\r\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n            [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\r\n            [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\r\n            Booking</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n  <div class=\"delivery-container\">\r\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section mb-2\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n        [style.borderColor]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\r\n          <div class=\"d-flex mx-1\"><mat-icon\r\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\r\n            style=\"width: 100%;\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\r\n      <!-- Free Delivery Section -->\r\n      <div class=\"delivery-section\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"delivery-icon d-flex align-items-center\">\r\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\r\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\r\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\r\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\r\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\r\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\r\n            </svg>\r\n          </span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\r\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            expected Order will\r\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\r\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #TryAtHome>\r\n  <!-- Try At Home Section -->\r\n  <div class=\"try-home-section\">\r\n    <div class=\"d-flex align-items-start try-home-item\">\r\n      <span class=\"home-icon d-flex align-items-center\">\r\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\r\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n        </svg>\r\n      </span>\r\n      <div class=\"try-home-details\">\r\n        <div class=\"try-home-header\">\r\n          <span class=\"try-home-text\">Try At Home</span>\r\n          <span class=\"free-text\"> (It's Free)</span>\r\n        </div>\r\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n        <!-- <div class=\"appointment-text\">\r\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n            </div> -->\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n        HOME</button>\r\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\r\n        Booking</button>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #StoreSection>\r\n  <!-- Nearest Store Section -->\r\n  <ng-container\r\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\r\n    <div class=\"store-section\">\r\n      <div class=\"d-flex align-items-center store-item\">\r\n        <span class=\"store-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </span>\r\n        <div class=\"store-details\">\r\n          <div class=\"store-text\">\r\n            <span class=\"store-label\">Nearest Store - </span>\r\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\r\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n          </div>\r\n          <!-- <div class=\"availability-section\">\r\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n            </div> -->\r\n          <!-- <div class=\"other-stores-text\">\r\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n            </div> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-center w-100\">\r\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\r\n          STORE</button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #emptyStore>\r\n    <div class=\"delivery-section\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <span class=\"delivery-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </span>\r\n        <span class=\"delivery-text\">No Stores are available</span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n  aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price px-3 pb-2\">\r\n    <div class=\"price-text\">Price</div>\r\n    <div class=\"d-flex  g-3 align-items-center\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"varient-container h-100 p-3\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"varient-data\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n    Customization</div>\r\n</div>\r\n\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price p-10-20\">\r\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n  </div>\r\n  <div class=\"price-breakup h-100 w-100\">\r\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n      <div class=\"price-container mb-3 p-10-20\">\r\n        <div class=\"price-container-header\">\r\n          {{ ele.materialType + \" BREAKUP\" }}\r\n        </div>\r\n        <div class=\"row w-100 header-row\">\r\n          <div class=\"col-3 text-center\">COMPONENT</div>\r\n          <div class=\"col-3 text-center\">RATE</div>\r\n          <div class=\"col-3 text-center\">WEIGHT</div>\r\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Making Charges</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Tax Amount</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Total Amount</div>\r\n        <div class=\"col-6 text-end total\">\r\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n          number:'1.2-2'}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\r\n\r\n    <!-- Header: Title + Average | Bar Chart -->\r\n    <div class=\"rv-header\">\r\n      <div class=\"rv-header-left\">\r\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\r\n        <div class=\"rv-average-row\">\r\n          <!-- filled stars -->\r\n          <div class=\"rv-stars\">\r\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\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\"\r\n                  fill=\"#eab308\" />\r\n              </svg>\r\n            </ng-container>\r\n          </div>\r\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n          <span class=\"rv-avg-label\">average</span>\r\n        </div>\r\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\r\n          {{responseData?.totalReviewCount | number}} Reviews\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"rv-bars\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"rv-bar-row\">\r\n            <span class=\"rv-bar-label\">{{rating}}</span>\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\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\"\r\n                fill=\"#eab308\" />\r\n            </svg>\r\n            <div class=\"rv-bar-track\">\r\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Cards Grid -->\r\n    <div class=\"rv-grid\">\r\n      <ng-container *ngFor=\"let review of reviewsData\">\r\n        <ng-container *ngIf=\"review.review\">\r\n          <div class=\"rv-card\">\r\n            <div class=\"rv-card-top\">\r\n              <div class=\"rv-reviewer\">\r\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\r\n                  class=\"rv-avatar\" alt=\"\">\r\n                <div class=\"rv-name-date\">\r\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\r\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\r\n                </div>\r\n              </div>\r\n              <!-- Star rating -->\r\n              <div class=\"rv-card-stars\">\r\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\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\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\r\n                    <path\r\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\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\r\n\r\n            <!-- Review Images -->\r\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\r\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\r\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\r\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-body\" style=\"height: 100%;\">\r\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n          <source\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n            type=\"video/mp4\">\r\n          Your browser does not support the video tag.\r\n        </video>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog review-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h1 class=\"modal-title fs-5\"></h1>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <div class=\"detail-review-container\">\r\n          <div class=\"image-section\">\r\n            <div class=\"product-image\">\r\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n              <!-- <div class=\"earbuds-container\">\r\n                <div class=\"charging-case\"></div>\r\n                <div class=\"earbud left\"></div>\r\n                <div class=\"earbud right\"></div>\r\n              </div> -->\r\n            </div>\r\n            <!-- <div class=\"navigation-arrows\">\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"review-section\">\r\n            <div class=\"reviewer-header\">\r\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n            </div>\r\n\r\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </div>\r\n\r\n            <div class=\"review-date\">\r\n              Reviewed in India on 24 July 2025\r\n            </div>\r\n\r\n            <div class=\"review-text\">\r\n              {{selectedReview?.review ?? \"-\"}}\r\n            </div>\r\n\r\n            <div class=\"images-section\">\r\n              <h3>Images in this review</h3>\r\n              <div class=\"review-images\">\r\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n                  <img [src]=\"img.imgUrl\" alt=\"\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\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,
@@ -20418,7 +20419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         SanitizeHtmlPipe,
                         NgxSkeletonLoaderModule
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div> -->\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n      [simpoLayout]=\"styles?.layout\" #container>\r\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div> -->\r\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\r\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\r\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\r\n          <div class=\"product-hero-card-modern\">\r\n            <ng-container *ngIf=\"isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\r\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\r\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <!-- Moved descriptors to Details tab below -->\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <!-- Moved tags to Details tab below -->\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <!-- Tabs Navigation -->\r\n      <div class=\"product-tabs-container\">\r\n        <ul class=\"tabs-list\">\r\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\r\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Details')\">Details</li>\r\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\r\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Reviews')\">Reviews</li>\r\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\r\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\r\n        </ul>\r\n      </div>\r\n\r\n      <!-- Tab Content -->\r\n      <div class=\"tab-content-pane\">\r\n        <div *ngIf=\"activeTab == 'Details'\">\r\n          <!-- Integrated descriptors and tags here -->\r\n          <div class=\"mt-2\">\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"activeTab == 'Reviews'\">\r\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\r\n          <div class=\"pb-glass-container mt-2\">\r\n\r\n            <!-- One card per material \u2014 generic, works for any material type -->\r\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n              <div class=\"pb-glass-card\">\r\n                <div class=\"pb-glass-header\"\r\n                     [style.background]=\"styles?.background?.accentColor\"\r\n                     [style.color]=\"'#fff'\">\r\n                  {{ ele?.materialName | titlecase }}\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Purity</span>\r\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Net Weight</span>\r\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\r\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Value</span>\r\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <!-- Making Charges card -->\r\n            <div class=\"pb-glass-card\">\r\n              <div class=\"pb-glass-header\"\r\n                   [style.background]=\"styles?.background?.accentColor\"\r\n                   [style.color]=\"'#fff'\">\r\n                Making Charges\r\n              </div>\r\n              <!-- <div class=\"pb-glass-row\">\r\n                <span class=\"pb-label\">Net Weight</span>\r\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\r\n              </div> -->\r\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\r\n                <span class=\"pb-label\">Making Charge %</span>\r\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\r\n              </div>\r\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\r\n                <span class=\"pb-label\">Value</span>\r\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Summary card -->\r\n            <div class=\"pb-summary-card\">\r\n              <div class=\"pb-summary-row\">\r\n                <span>Total Value</span>\r\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\r\n              </div>\r\n              <div class=\"pb-summary-row\">\r\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\r\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\r\n              </div>\r\n              <div class=\"pb-grand-total\"\r\n                   [style.background]=\"styles?.background?.accentColor\"\r\n                   [style.color]=\"'#fff'\">\r\n                <span>TOTAL</span>\r\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container> -->\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n    [id]=\"data?.id+getButtonId(0)\">Out of\r\n    Stock</button>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\r\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n  </div>\r\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\r\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\">Out of\r\n      Stock</button>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n    </div>\r\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\r\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n          message</mat-icon>Notify Me</button>\r\n    </div>\r\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-3\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n    <ng-container>\r\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-semibold\">\r\n            {{item.value |\r\n            titlecase}}</div>\r\n        </div>\r\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"product-info-minimal\">\r\n    <!-- Brand -->\r\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\r\n      <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\r\n    </div>\r\n\r\n    <!-- Item Code -->\r\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\r\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\r\n    </div>\r\n\r\n    <!-- Title and Price Row -->\r\n    <div class=\"title-price-row-modern\">\r\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\r\n      <div class=\"product-price-modern\">\r\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\r\n          number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Rating Row -->\r\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\r\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n      <span class=\"separator\">|</span>\r\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\r\n        {{responseData?.totalReviewCount}} reviews</span>\r\n    </div>\r\n\r\n    <!-- Brief Description -->\r\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc mt-2\">\r\n    <div>\r\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\r\n          [style.background]=\"data?.styles?.background?.accentColor\"\r\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n          <mat-icon>add</mat-icon> PRICE BREAKUP\r\n        </div>\r\n      </div> -->\r\n      <div class=\"description\">\r\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\r\n          [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <div class=\"custom-specifications\" style=\"margin-top: 16px;\" *ngIf=\"customFieldSpecs.length\">\r\n        <div class=\"body-large\" style=\"font-weight: 600; margin-bottom: 8px;\">Specifications</div>\r\n        <div class=\"d-flex\" style=\"gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08);\"\r\n          *ngFor=\"let spec of customFieldSpecs\">\r\n          <span style=\"flex: 0 0 40%; opacity: 0.7;\">{{ spec.label }}</span>\r\n          <span style=\"flex: 1;\">{{ spec.value }}</span>\r\n        </div>\r\n      </div>\r\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\r\n        <div class=\"jewellery-table-container\">\r\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n            <div class=\"jewel-container mt-2\">\r\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\r\n                {{ele?.materialName | titlecase}}\r\n              </div>\r\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/{{ele?.unit | titlecase}}\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.purity |\r\n                    titlecase}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container> -->\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\r\n      <div class=\"main-image-container p-0\">\r\n        <div class=\"item-img rounded-3\">\r\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\r\n          </lib-ngx-image-zoom>\r\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\r\n            class=\"w-100 h-100 object-fit-cover\">\r\n        </div>\r\n      </div>\r\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\r\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\r\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\r\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"bento-masonry-container\">\r\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\r\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"row w-100\">\r\n    <ng-container *ngFor=\"let brand of brandPromises\">\r\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\r\n        <div class=\"brand-text w-100 text-center py-2\">\r\n          {{brand?.title | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\r\n  <ng-container>\r\n    <div class=\"row w-100 video-container\">\r\n      <div class=\"col-4 video-call-img\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\r\n          alt=\"\" class=\"w-100 h-100 \">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\">\r\n        <div class=\"video-head-text\">\r\n          Live Video Call\r\n        </div>\r\n        <div class=\"sub-text\">\r\n          Join a live video call with our consultants to see your favourite designs up close!\r\n        </div>\r\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n          Schedule a Video Call\r\n        </button>\r\n        <ng-container *ngIf=\"videoCallAdded\">\r\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\r\n            <mat-icon>check_circle</mat-icon>\r\n            <span>Added to your Video Call request</span>\r\n          </div>\r\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n            [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\r\n            [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\r\n            Booking</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n  <div class=\"delivery-container\">\r\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section mb-2\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n        [style.borderColor]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\r\n          <div class=\"d-flex mx-1\"><mat-icon\r\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\r\n            style=\"width: 100%;\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\r\n      <!-- Free Delivery Section -->\r\n      <div class=\"delivery-section\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"delivery-icon d-flex align-items-center\">\r\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\r\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\r\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\r\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\r\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\r\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\r\n            </svg>\r\n          </span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\r\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            expected Order will\r\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\r\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #TryAtHome>\r\n  <!-- Try At Home Section -->\r\n  <div class=\"try-home-section\">\r\n    <div class=\"d-flex align-items-start try-home-item\">\r\n      <span class=\"home-icon d-flex align-items-center\">\r\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\r\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n        </svg>\r\n      </span>\r\n      <div class=\"try-home-details\">\r\n        <div class=\"try-home-header\">\r\n          <span class=\"try-home-text\">Try At Home</span>\r\n          <span class=\"free-text\"> (It's Free)</span>\r\n        </div>\r\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n        <!-- <div class=\"appointment-text\">\r\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n            </div> -->\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n        HOME</button>\r\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\r\n        Booking</button>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #StoreSection>\r\n  <!-- Nearest Store Section -->\r\n  <ng-container\r\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\r\n    <div class=\"store-section\">\r\n      <div class=\"d-flex align-items-center store-item\">\r\n        <span class=\"store-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </span>\r\n        <div class=\"store-details\">\r\n          <div class=\"store-text\">\r\n            <span class=\"store-label\">Nearest Store - </span>\r\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\r\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n          </div>\r\n          <!-- <div class=\"availability-section\">\r\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n            </div> -->\r\n          <!-- <div class=\"other-stores-text\">\r\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n            </div> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-center w-100\">\r\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\r\n          STORE</button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #emptyStore>\r\n    <div class=\"delivery-section\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <span class=\"delivery-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </span>\r\n        <span class=\"delivery-text\">No Stores are available</span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n  aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price px-3 pb-2\">\r\n    <div class=\"price-text\">Price</div>\r\n    <div class=\"d-flex  g-3 align-items-center\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"varient-container h-100 p-3\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"varient-data\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n    Customization</div>\r\n</div>\r\n\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price p-10-20\">\r\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n  </div>\r\n  <div class=\"price-breakup h-100 w-100\">\r\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n      <div class=\"price-container mb-3 p-10-20\">\r\n        <div class=\"price-container-header\">\r\n          {{ ele.materialType + \" BREAKUP\" }}\r\n        </div>\r\n        <div class=\"row w-100 header-row\">\r\n          <div class=\"col-3 text-center\">COMPONENT</div>\r\n          <div class=\"col-3 text-center\">RATE</div>\r\n          <div class=\"col-3 text-center\">WEIGHT</div>\r\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Making Charges</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Tax Amount</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Total Amount</div>\r\n        <div class=\"col-6 text-end total\">\r\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n          number:'1.2-2'}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\r\n\r\n    <!-- Header: Title + Average | Bar Chart -->\r\n    <div class=\"rv-header\">\r\n      <div class=\"rv-header-left\">\r\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\r\n        <div class=\"rv-average-row\">\r\n          <!-- filled stars -->\r\n          <div class=\"rv-stars\">\r\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\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\"\r\n                  fill=\"#eab308\" />\r\n              </svg>\r\n            </ng-container>\r\n          </div>\r\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n          <span class=\"rv-avg-label\">average</span>\r\n        </div>\r\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\r\n          {{responseData?.totalReviewCount | number}} Reviews\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"rv-bars\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"rv-bar-row\">\r\n            <span class=\"rv-bar-label\">{{rating}}</span>\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\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\"\r\n                fill=\"#eab308\" />\r\n            </svg>\r\n            <div class=\"rv-bar-track\">\r\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Cards Grid -->\r\n    <div class=\"rv-grid\">\r\n      <ng-container *ngFor=\"let review of reviewsData\">\r\n        <ng-container *ngIf=\"review.review\">\r\n          <div class=\"rv-card\">\r\n            <div class=\"rv-card-top\">\r\n              <div class=\"rv-reviewer\">\r\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\r\n                  class=\"rv-avatar\" alt=\"\">\r\n                <div class=\"rv-name-date\">\r\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\r\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\r\n                </div>\r\n              </div>\r\n              <!-- Star rating -->\r\n              <div class=\"rv-card-stars\">\r\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\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\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\r\n                    <path\r\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\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\r\n\r\n            <!-- Review Images -->\r\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\r\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\r\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\r\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-body\" style=\"height: 100%;\">\r\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n          <source\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n            type=\"video/mp4\">\r\n          Your browser does not support the video tag.\r\n        </video>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog review-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h1 class=\"modal-title fs-5\"></h1>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <div class=\"detail-review-container\">\r\n          <div class=\"image-section\">\r\n            <div class=\"product-image\">\r\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n              <!-- <div class=\"earbuds-container\">\r\n                <div class=\"charging-case\"></div>\r\n                <div class=\"earbud left\"></div>\r\n                <div class=\"earbud right\"></div>\r\n              </div> -->\r\n            </div>\r\n            <!-- <div class=\"navigation-arrows\">\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"review-section\">\r\n            <div class=\"reviewer-header\">\r\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n            </div>\r\n\r\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </div>\r\n\r\n            <div class=\"review-date\">\r\n              Reviewed in India on 24 July 2025\r\n            </div>\r\n\r\n            <div class=\"review-text\">\r\n              {{selectedReview?.review ?? \"-\"}}\r\n            </div>\r\n\r\n            <div class=\"images-section\">\r\n              <h3>Images in this review</h3>\r\n              <div class=\"review-images\">\r\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n                  <img [src]=\"img.imgUrl\" alt=\"\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\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\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div> -->\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\r\n      [simpoLayout]=\"styles?.layout\" #container>\r\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n          (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div> -->\r\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\r\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\r\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\r\n          <div class=\"product-hero-card-modern\">\r\n            <ng-container *ngIf=\"isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!isMobile\">\r\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n            </ng-container>\r\n          </div>\r\n\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\r\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\r\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\r\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\r\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n\r\n          <!-- Moved descriptors to Details tab below -->\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <!-- Moved tags to Details tab below -->\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <!-- Tabs Navigation -->\r\n      <div class=\"product-tabs-container\">\r\n        <ul class=\"tabs-list\">\r\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\r\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Details')\">Details</li>\r\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\r\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('Reviews')\">Reviews</li>\r\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\r\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\r\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\r\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\r\n        </ul>\r\n      </div>\r\n\r\n      <!-- Tab Content -->\r\n      <div class=\"tab-content-pane\">\r\n        <div *ngIf=\"activeTab == 'Details'\">\r\n          <!-- Integrated descriptors and tags here -->\r\n          <div class=\"mt-2\">\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"activeTab == 'Reviews'\">\r\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\r\n          <div class=\"pb-glass-container mt-2\">\r\n\r\n            <!-- One card per material \u2014 generic, works for any material type -->\r\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n              <div class=\"pb-glass-card\">\r\n                <div class=\"pb-glass-header\"\r\n                     [style.background]=\"styles?.background?.accentColor\"\r\n                     [style.color]=\"'#fff'\">\r\n                  {{ ele?.materialName | titlecase }}\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Purity</span>\r\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Net Weight</span>\r\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\r\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\r\n                </div>\r\n                <div class=\"pb-glass-row\">\r\n                  <span class=\"pb-label\">Value</span>\r\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <!-- Making Charges card -->\r\n            <div class=\"pb-glass-card\">\r\n              <div class=\"pb-glass-header\"\r\n                   [style.background]=\"styles?.background?.accentColor\"\r\n                   [style.color]=\"'#fff'\">\r\n                Making Charges\r\n              </div>\r\n              <!-- <div class=\"pb-glass-row\">\r\n                <span class=\"pb-label\">Net Weight</span>\r\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\r\n              </div> -->\r\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\r\n                <span class=\"pb-label\">Making Charge %</span>\r\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\r\n              </div>\r\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\r\n                <span class=\"pb-label\">Value</span>\r\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Summary card -->\r\n            <div class=\"pb-summary-card\">\r\n              <div class=\"pb-summary-row\">\r\n                <span>Total Value</span>\r\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\r\n              </div>\r\n              <div class=\"pb-summary-row\">\r\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\r\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\r\n              </div>\r\n              <div class=\"pb-grand-total\"\r\n                   [style.background]=\"styles?.background?.accentColor\"\r\n                   [style.color]=\"'#fff'\">\r\n                <span>TOTAL</span>\r\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container> -->\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n    [id]=\"data?.id+getButtonId(0)\">Out of\r\n    Stock</button>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\r\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n  </div>\r\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\r\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n      Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n            (click)=\"addProductReview()\"\r\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n      [id]=\"data?.id+getButtonId(0)\">Out of\r\n      Stock</button>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n    </div>\r\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\r\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\"\r\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\r\n    </div>\r\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n          message</mat-icon>Notify Me</button>\r\n    </div>\r\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"mb-3\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n    <ng-container>\r\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\r\n          <div class=\"variant-value text-start fw-semibold\">\r\n            {{item.value |\r\n            titlecase}}</div>\r\n        </div>\r\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n  <div class=\"product-info-minimal\">\r\n    <!-- Brand -->\r\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCategorisation?.itemBrand?.refName\">\r\n      <span class=\"item-code-value\">by {{ responseData?.itemCategorisation?.itemBrand?.refName }}</span>\r\n    </div>\r\n\r\n    <!-- Item Code -->\r\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\r\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\r\n    </div>\r\n\r\n    <!-- Title and Price Row -->\r\n    <div class=\"title-price-row-modern\">\r\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\r\n      <div class=\"product-price-modern\">\r\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\r\n          number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Rating Row -->\r\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\r\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n      <span class=\"separator\">|</span>\r\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\r\n        {{responseData?.totalReviewCount}} reviews</span>\r\n    </div>\r\n\r\n    <!-- Brief Description -->\r\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc mt-2\">\r\n    <div>\r\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\r\n          [style.background]=\"data?.styles?.background?.accentColor\"\r\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n          <mat-icon>add</mat-icon> PRICE BREAKUP\r\n        </div>\r\n      </div> -->\r\n      <div class=\"description\">\r\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\r\n          [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <div class=\"custom-specifications\" *ngIf=\"customFieldSpecs.length\">\r\n        <div class=\"body-large spec-title\">Specifications</div>\r\n        <table class=\"spec-table\">\r\n          <tbody>\r\n            <tr *ngFor=\"let spec of customFieldSpecs\">\r\n              <th scope=\"row\">{{ spec.label }}</th>\r\n              <td>{{ spec.value }}</td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\r\n        <div class=\"jewellery-table-container\">\r\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n            <div class=\"jewel-container mt-2\">\r\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\r\n                {{ele?.materialName | titlecase}}\r\n              </div>\r\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Net Weight/{{ele?.unit | titlecase}}\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-6 metal-purity\">\r\n                  <div class=\"row-header\">\r\n                    Purity\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.purity |\r\n                    titlecase}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container> -->\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\r\n      <div class=\"main-image-container p-0\">\r\n        <div class=\"item-img rounded-3\">\r\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\r\n          </lib-ngx-image-zoom>\r\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\r\n            class=\"w-100 h-100 object-fit-cover\">\r\n        </div>\r\n      </div>\r\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\r\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\r\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\r\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"bento-masonry-container\">\r\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\r\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n  <div class=\"row w-100\">\r\n    <ng-container *ngFor=\"let brand of brandPromises\">\r\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\r\n        <div class=\"brand-text w-100 text-center py-2\">\r\n          {{brand?.title | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\r\n  <ng-container>\r\n    <div class=\"row w-100 video-container\">\r\n      <div class=\"col-4 video-call-img\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\r\n          alt=\"\" class=\"w-100 h-100 \">\r\n      </div>\r\n      <div class=\"col-8 align-content-center\">\r\n        <div class=\"video-head-text\">\r\n          Live Video Call\r\n        </div>\r\n        <div class=\"sub-text\">\r\n          Join a live video call with our consultants to see your favourite designs up close!\r\n        </div>\r\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\r\n          Schedule a Video Call\r\n        </button>\r\n        <ng-container *ngIf=\"videoCallAdded\">\r\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\r\n            <mat-icon>check_circle</mat-icon>\r\n            <span>Added to your Video Call request</span>\r\n          </div>\r\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n            [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\r\n            [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\r\n            Booking</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n  <div class=\"delivery-container\">\r\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n    <!-- Location Section -->\r\n    <div class=\"location-section mb-2\">\r\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n        [style.borderColor]=\"styles?.background?.accentColor\">\r\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\r\n          <div class=\"d-flex mx-1\"><mat-icon\r\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n          </div>\r\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\r\n            style=\"width: 100%;\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\r\n      <!-- Free Delivery Section -->\r\n      <div class=\"delivery-section\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"delivery-icon d-flex align-items-center\">\r\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\r\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\r\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\r\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\r\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\r\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\r\n            </svg>\r\n          </span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\r\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            expected Order will\r\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\r\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #TryAtHome>\r\n  <!-- Try At Home Section -->\r\n  <div class=\"try-home-section\">\r\n    <div class=\"d-flex align-items-start try-home-item\">\r\n      <span class=\"home-icon d-flex align-items-center\">\r\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\r\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\r\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\r\n        </svg>\r\n      </span>\r\n      <div class=\"try-home-details\">\r\n        <div class=\"try-home-header\">\r\n          <span class=\"try-home-text\">Try At Home</span>\r\n          <span class=\"free-text\"> (It's Free)</span>\r\n        </div>\r\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n        <!-- <div class=\"appointment-text\">\r\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n            </div> -->\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n        HOME</button>\r\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\r\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\r\n        Booking</button>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #StoreSection>\r\n  <!-- Nearest Store Section -->\r\n  <ng-container\r\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\r\n    <div class=\"store-section\">\r\n      <div class=\"d-flex align-items-center store-item\">\r\n        <span class=\"store-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </span>\r\n        <div class=\"store-details\">\r\n          <div class=\"store-text\">\r\n            <span class=\"store-label\">Nearest Store - </span>\r\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\r\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n          </div>\r\n          <!-- <div class=\"availability-section\">\r\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n            </div> -->\r\n          <!-- <div class=\"other-stores-text\">\r\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n            </div> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-center w-100\">\r\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\r\n          STORE</button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #emptyStore>\r\n    <div class=\"delivery-section\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <span class=\"delivery-icon d-flex align-items-center\">\r\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\r\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n        </span>\r\n        <span class=\"delivery-text\">No Stores are available</span>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n  aria-labelledby=\"offcanvasRightLabel\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price px-3 pb-2\">\r\n    <div class=\"price-text\">Price</div>\r\n    <div class=\"d-flex  g-3 align-items-center\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.discountedPrice}}</div>\r\n      <div class=\"price\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"varient-container h-100 p-3\">\r\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n      <div class=\"varient-data\">\r\n        <div class=\"varient-key\">{{varient.key}}</div>\r\n        <div class=\"d-flex\" style=\"gap: 5px;\">\r\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n    Customization</div>\r\n</div>\r\n\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n    <mat-icon data-bs-dismiss=\"offcanvas\"\r\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\r\n  </div>\r\n  <div class=\"varient-price p-10-20\">\r\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n  </div>\r\n  <div class=\"price-breakup h-100 w-100\">\r\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n      <div class=\"price-container mb-3 p-10-20\">\r\n        <div class=\"price-container-header\">\r\n          {{ ele.materialType + \" BREAKUP\" }}\r\n        </div>\r\n        <div class=\"row w-100 header-row\">\r\n          <div class=\"col-3 text-center\">COMPONENT</div>\r\n          <div class=\"col-3 text-center\">RATE</div>\r\n          <div class=\"col-3 text-center\">WEIGHT</div>\r\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n        </div>\r\n        <div class=\"row w-100 value-row\">\r\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Making Charges</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Tax Amount</div>\r\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n        </div>\r\n      </div>\r\n      <div class=\"row w-100 summary-row\">\r\n        <div class=\"col-6 text-start\">Total Amount</div>\r\n        <div class=\"col-6 text-end total\">\r\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n          number:'1.2-2'}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\r\n\r\n    <!-- Header: Title + Average | Bar Chart -->\r\n    <div class=\"rv-header\">\r\n      <div class=\"rv-header-left\">\r\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\r\n        <div class=\"rv-average-row\">\r\n          <!-- filled stars -->\r\n          <div class=\"rv-stars\">\r\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                <path\r\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\"\r\n                  fill=\"#eab308\" />\r\n              </svg>\r\n            </ng-container>\r\n          </div>\r\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\r\n          <span class=\"rv-avg-label\">average</span>\r\n        </div>\r\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\r\n          {{responseData?.totalReviewCount | number}} Reviews\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"rv-bars\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"rv-bar-row\">\r\n            <span class=\"rv-bar-label\">{{rating}}</span>\r\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path\r\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\"\r\n                fill=\"#eab308\" />\r\n            </svg>\r\n            <div class=\"rv-bar-track\">\r\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Review Cards Grid -->\r\n    <div class=\"rv-grid\">\r\n      <ng-container *ngFor=\"let review of reviewsData\">\r\n        <ng-container *ngIf=\"review.review\">\r\n          <div class=\"rv-card\">\r\n            <div class=\"rv-card-top\">\r\n              <div class=\"rv-reviewer\">\r\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\r\n                  class=\"rv-avatar\" alt=\"\">\r\n                <div class=\"rv-name-date\">\r\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\r\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\r\n                </div>\r\n              </div>\r\n              <!-- Star rating -->\r\n              <div class=\"rv-card-stars\">\r\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\r\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path\r\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\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\r\n                    <path\r\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\"\r\n                      fill=\"#eab308\" />\r\n                  </svg>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\r\n\r\n            <!-- Review Images -->\r\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\r\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\r\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\r\n              </a>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\r\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-body\" style=\"height: 100%;\">\r\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n          <source\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n            type=\"video/mp4\">\r\n          Your browser does not support the video tag.\r\n        </video>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n  aria-hidden=\"true\">\r\n  <div class=\"modal-dialog review-modal\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h1 class=\"modal-title fs-5\"></h1>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        <div class=\"detail-review-container\">\r\n          <div class=\"image-section\">\r\n            <div class=\"product-image\">\r\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n              <!-- <div class=\"earbuds-container\">\r\n                <div class=\"charging-case\"></div>\r\n                <div class=\"earbud left\"></div>\r\n                <div class=\"earbud right\"></div>\r\n              </div> -->\r\n            </div>\r\n            <!-- <div class=\"navigation-arrows\">\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"review-section\">\r\n            <div class=\"reviewer-header\">\r\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n            </div>\r\n\r\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </div>\r\n\r\n            <div class=\"review-date\">\r\n              Reviewed in India on 24 July 2025\r\n            </div>\r\n\r\n            <div class=\"review-text\">\r\n              {{selectedReview?.review ?? \"-\"}}\r\n            </div>\r\n\r\n            <div class=\"images-section\">\r\n              <h3>Images in this review</h3>\r\n              <div class=\"review-images\">\r\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n                  <img [src]=\"img.imgUrl\" alt=\"\">\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\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]
@@ -20594,6 +20595,8 @@ 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;
@@ -20821,36 +20824,42 @@ class ProductListComponent extends BaseSection {
     // 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() {
-        if (this.isMaterialBasedPricing)
-            return; // customFieldFilters are not applied to jewellery listings
-        const selectedCategories = this.categories.filter(x => x.status);
-        const selectedCollections = this.collections.filter(x => x.status);
-        const categoryId = selectedCategories.length === 1 ? selectedCategories[0].id : null;
-        const collectionId = selectedCollections.length === 1 ? selectedCollections[0].id : null;
-        // A URL slug that matched no loaded category/collection (e.g. not featured) scopes the page
-        // by slug instead. The server prefers the id when both are sent.
-        const categorySlug = !categoryId && !selectedCategories.length && this.urlCategorySlugs.length === 1 ? this.urlCategorySlugs[0] : null;
-        const collectionSlug = !collectionId && !selectedCollections.length && this.urlCollectionSlugs.length === 1 ? this.urlCollectionSlugs[0] : null;
-        const key = `${categoryId ?? ''}|${collectionId ?? ''}|${categorySlug ?? ''}|${collectionSlug ?? ''}`;
+        // 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(categoryId, collectionId, categorySlug, collectionSlug).subscribe({
+        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 => !this.SYSTEM_FILTER_IDS.includes(f.identifier))
+                    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 = new Set(this.customFilterGroups.flatMap(g => g.filters.map(f => f.identifier)));
+                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))
@@ -20862,10 +20871,41 @@ class ProductListComponent extends BaseSection {
             }
         });
     }
+    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';
@@ -21672,7 +21712,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\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\"\r\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n    </div> -->\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          CLEAR ALL\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n          <ng-container *ngFor=\"let filter of displayChips\">\r\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n          </select>\r\n        </div> -->\r\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n          <span class=\"sort-label\">Sort By:</span>\r\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\r\n\r\n          <div class=\"options\" *ngIf=\"isOpen\">\r\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n              (click)=\"selectOption(filter, $event)\">\r\n              {{ filter.name }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n      <ng-container *ngFor=\"let filter of displayChips\">\r\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"main-product-section\">\r\n      <div class=\"filter-side\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\r\n        #listScrollContainer>\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\r\n                  Looks like no item is present with filter. Go ahead & explore top categories.\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n        [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <div class=\"fav-icon-wrapper\">\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n    </mat-icon>\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n    </mat-icon>\r\n    <span class=\"fav-tooltip\">\r\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n  <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\r\n    <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\r\n      [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\r\n      [style.color]=\"getTextColor(styles?.background?.accentColor)\">\r\n      {{ tag }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"categoriesCollapsed = !categoriesCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop by Categories</b></h6>\r\n        <mat-icon>{{ categoriesCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!categoriesCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n          (click)=\"applyFilter(category, 'FILTER')\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"category.status\" />\r\n          <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n        </div>\r\n        <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n          [style.color]=\"styles?.background?.accentColor\">\r\n          <span class=\"toggle-text\">\r\n            {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n            <span class=\"dropdown-icon\">\r\n              <ng-container *ngIf=\"!showAllCategories\">\r\n                <mat-icon>expand_more</mat-icon>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"showAllCategories\">\r\n                <mat-icon>expand_less</mat-icon>\r\n              </ng-container>\r\n            </span>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"collectionsCollapsed = !collectionsCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop by Collections</b></h6>\r\n        <mat-icon>{{ collectionsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!collectionsCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n          (click)=\"applyFilter(collection, 'FILTER')\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"collection.status\" />\r\n          <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n        </div>\r\n        <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n          [style.color]=\"styles?.background?.accentColor\">\r\n          <span class=\"toggle-text\">\r\n            {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n            <span class=\"dropdown-icon\">\r\n              <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n              <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n            </span>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"(brands?.length ?? 0) > 1\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"brandsCollapsed = !brandsCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop by Brand</b></h6>\r\n        <mat-icon>{{ brandsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!brandsCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let brand of displayedBrands\"\r\n          (click)=\"applyFilter(brand, 'FILTER')\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"brand.status\" />\r\n          <div class=\"trim-text\">{{brand.option | titlecase}}</div>\r\n        </div>\r\n        <div *ngIf=\"brands.length > 4\" class=\"toggle-categories\" (click)=\"toggleBrands()\"\r\n          [style.color]=\"styles?.background?.accentColor\">\r\n          <span class=\"toggle-text\">\r\n            {{ showAllBrands ? 'Show Less' : 'Show More' }}\r\n            <span class=\"dropdown-icon\">\r\n              <ng-container *ngIf=\"!showAllBrands\"><mat-icon>expand_more</mat-icon></ng-container>\r\n              <ng-container *ngIf=\"showAllBrands\"><mat-icon>expand_less</mat-icon></ng-container>\r\n            </span>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Ratings</b></h6>\r\n        <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!ratingsCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"rating.selected\" />\r\n          <div class=\"trim-text\">{{ rating.label }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop by price</b></h6>\r\n        <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!priceCollapsed\">\r\n        <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n          <div class=\"trim-text\">{{ range.label }}</div>\r\n        </label>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- Server-driven filters from query-options (Specifications, Item Type, ...). Empty for unseeded businesses. -->\r\n    <div class=\"categories-section\" *ngFor=\"let group of customFilterGroups\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"customGroupCollapsed[group.key] = !customGroupCollapsed[group.key]\" style=\"cursor:pointer\">\r\n        <h6><b>{{ group.label }}</b></h6>\r\n        <mat-icon>{{ customGroupCollapsed[group.key] ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!customGroupCollapsed[group.key]\">\r\n        <ng-container *ngFor=\"let filter of group.filters\">\r\n          <div *ngIf=\"group.filters.length > 1\" class=\"trim-text\" style=\"font-weight: 600; margin-top: 8px;\">\r\n            {{ filter.label }}\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"filter.control === 'RANGE'; else customChoices\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-top: 6px;\">\r\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\r\n                [attr.max]=\"filter.max\" [placeholder]=\"'Min ' + (filter.min ?? '')\"\r\n                [ngModel]=\"customRange(filter.identifier).min\"\r\n                (change)=\"setCustomRange(filter.identifier, 'min', $any($event.target).value)\" />\r\n              <span>-</span>\r\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\r\n                [attr.max]=\"filter.max\" [placeholder]=\"'Max ' + (filter.max ?? '')\"\r\n                [ngModel]=\"customRange(filter.identifier).max\"\r\n                (change)=\"setCustomRange(filter.identifier, 'max', $any($event.target).value)\" />\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-template #customChoices>\r\n            <ng-container *ngIf=\"filter.control === 'BOOLEAN' && !filter.choices?.length; else choiceList\">\r\n              <label class=\"category-options\">\r\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, 'true')\"\r\n                  (change)=\"toggleCustomChoice(filter, 'true')\" />\r\n                <div class=\"trim-text\">Yes</div>\r\n              </label>\r\n            </ng-container>\r\n            <ng-template #choiceList>\r\n              <label class=\"category-options\" *ngFor=\"let choice of filter.choices\">\r\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, choice.value)\"\r\n                  (change)=\"toggleCustomChoice(filter, choice.value)\" />\r\n                <div class=\"trim-text\">{{ choice.label }} <span *ngIf=\"choice.count !== undefined\">({{ choice.count }})</span></div>\r\n              </label>\r\n            </ng-template>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Product Type</b></h6>\r\n        <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!productTypeCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop for</b></h6>\r\n        <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!shopForCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Material</b></h6>\r\n        <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!materialCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Metal</b></h6>\r\n        <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!metalCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Ring Style</b></h6>\r\n        <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!ringStyleCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n        [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <ng-template #theme1style1>\r\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n        <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n          <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n          <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div class=\"mt-2 w-100\">\r\n        <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n          <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n              (click)=\"selectVarient(product, varient)\">\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n          <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n            <div class=\"fs-16\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n            </div>\r\n\r\n            <div class=\"fs-16 text-start\">\r\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n                {{product?.price?.value | number:'1.0-0'}}\r\n              </span>\r\n            </div>\r\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product.price.sellingPrice | number:'1.0-0'}}\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n          <div class=\"material-info\"\r\n            *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\r\n            <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\r\n            <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\r\n            <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section\"\r\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n    <div class=\"row w-100\">\r\n      <div class=\"col-8 d-flex flex-column gap-3\">\r\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n        <div class=\"fs-16 text-start\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n        </div>\r\n        <div class=\"d-flex w-45\">\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn w-100\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section w-100\"\r\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4 h-100 position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\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.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"] }] }); }
+    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\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\"\r\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n    </div> -->\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          CLEAR ALL\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\"></div>\r\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n          </select>\r\n        </div> -->\r\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n          <span class=\"sort-label\">Sort By:</span>\r\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\r\n\r\n          <div class=\"options\" *ngIf=\"isOpen\">\r\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n              (click)=\"selectOption(filter, $event)\">\r\n              {{ filter.name }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-product-section\">\r\n      <div class=\"filter-side\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\r\n        #listScrollContainer>\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\r\n                  Looks like no item is present with filter. Go ahead & explore top categories.\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n        [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <div class=\"fav-icon-wrapper\">\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n    </mat-icon>\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n    </mat-icon>\r\n    <span class=\"fav-tooltip\">\r\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n  <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\r\n    <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\r\n      [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\r\n      [style.color]=\"getTextColor(styles?.background?.accentColor)\">\r\n      {{ tag }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <!-- Server-driven filters from query-options (Brand, Categories, Collections, Specifications, ...).\r\n         Empty for unseeded businesses, in which case the legacy blocks below are the sidebar. -->\r\n    <div class=\"categories-section\" *ngFor=\"let group of customFilterGroups\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"customGroupCollapsed[group.key] = !customGroupCollapsed[group.key]\" style=\"cursor:pointer\">\r\n        <h6><b>{{ group.label }}</b></h6>\r\n        <mat-icon>{{ customGroupCollapsed[group.key] ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!customGroupCollapsed[group.key]\">\r\n        <ng-container *ngFor=\"let filter of group.filters\">\r\n          <div *ngIf=\"group.filters.length > 1\" class=\"trim-text\" style=\"font-weight: 600; margin-top: 8px;\">\r\n            {{ filter.label }}\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"filter.control === 'RANGE'; else customChoices\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-top: 6px;\">\r\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\r\n                [attr.max]=\"filter.max\" [placeholder]=\"'Min ' + (filter.min ?? '')\"\r\n                [ngModel]=\"customRange(filter.identifier).min\"\r\n                (change)=\"setCustomRange(filter.identifier, 'min', $any($event.target).value)\" />\r\n              <span>-</span>\r\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\r\n                [attr.max]=\"filter.max\" [placeholder]=\"'Max ' + (filter.max ?? '')\"\r\n                [ngModel]=\"customRange(filter.identifier).max\"\r\n                (change)=\"setCustomRange(filter.identifier, 'max', $any($event.target).value)\" />\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-template #customChoices>\r\n            <ng-container *ngIf=\"filter.control === 'BOOLEAN' && !filter.choices?.length; else choiceList\">\r\n              <label class=\"category-options\">\r\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, 'true')\"\r\n                  (change)=\"toggleCustomChoice(filter, 'true')\" />\r\n                <div class=\"trim-text\">Yes</div>\r\n              </label>\r\n            </ng-container>\r\n            <ng-template #choiceList>\r\n              <label class=\"category-options\" *ngFor=\"let choice of filter.choices\">\r\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, choice.value)\"\r\n                  (change)=\"toggleCustomChoice(filter, choice.value)\" />\r\n                <div class=\"trim-text\">{{ choice.label }} <span *ngIf=\"choice.count !== undefined\">({{ choice.count }})</span></div>\r\n              </label>\r\n            </ng-template>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- No legacy Categories block: categories are shown only when query-options returns them. -->\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Product Type</b></h6>\r\n        <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!productTypeCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop for</b></h6>\r\n        <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!shopForCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Material</b></h6>\r\n        <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!materialCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Metal</b></h6>\r\n        <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!metalCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Ring Style</b></h6>\r\n        <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!ringStyleCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- Ratings and price stay at the bottom, below the server-driven filters. -->\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Ratings</b></h6>\r\n        <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!ratingsCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"rating.selected\" />\r\n          <div class=\"trim-text\">{{ rating.label }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop by price</b></h6>\r\n        <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!priceCollapsed\">\r\n        <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n          <div class=\"trim-text\">{{ range.label }}</div>\r\n        </label>\r\n      </ng-container>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n        [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <ng-template #theme1style1>\r\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n        <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n          <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n          <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div class=\"mt-2 w-100\">\r\n        <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n          <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n              (click)=\"selectVarient(product, varient)\">\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n          <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n            <div class=\"fs-16\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n            </div>\r\n\r\n            <div class=\"fs-16 text-start\">\r\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n                {{product?.price?.value | number:'1.0-0'}}\r\n              </span>\r\n            </div>\r\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product.price.sellingPrice | number:'1.0-0'}}\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n          <div class=\"material-info\"\r\n            *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\r\n            <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\r\n            <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\r\n            <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section\"\r\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n    <div class=\"row w-100\">\r\n      <div class=\"col-8 d-flex flex-column gap-3\">\r\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n        <div class=\"fs-16 text-start\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n        </div>\r\n        <div class=\"d-flex w-45\">\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn w-100\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section w-100\"\r\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4 h-100 position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\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,
@@ -21699,7 +21739,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\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\"\r\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n    </div> -->\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          CLEAR ALL\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n          <ng-container *ngFor=\"let filter of displayChips\">\r\n            <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n              <span>{{filter.name}}</span>\r\n              <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n                <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n              </span>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n          </select>\r\n        </div> -->\r\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n          <span class=\"sort-label\">Sort By:</span>\r\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\r\n\r\n          <div class=\"options\" *ngIf=\"isOpen\">\r\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n              (click)=\"selectOption(filter, $event)\">\r\n              {{ filter.name }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n      <ng-container *ngFor=\"let filter of displayChips\">\r\n        <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n          <span>{{filter.name}}</span>\r\n          <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n            <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"main-product-section\">\r\n      <div class=\"filter-side\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\r\n        #listScrollContainer>\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\r\n                  Looks like no item is present with filter. Go ahead & explore top categories.\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n        [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <div class=\"fav-icon-wrapper\">\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n    </mat-icon>\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n    </mat-icon>\r\n    <span class=\"fav-tooltip\">\r\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n  <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\r\n    <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\r\n      [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\r\n      [style.color]=\"getTextColor(styles?.background?.accentColor)\">\r\n      {{ tag }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"categoriesCollapsed = !categoriesCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop by Categories</b></h6>\r\n        <mat-icon>{{ categoriesCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!categoriesCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n          (click)=\"applyFilter(category, 'FILTER')\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"category.status\" />\r\n          <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n        </div>\r\n        <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n          [style.color]=\"styles?.background?.accentColor\">\r\n          <span class=\"toggle-text\">\r\n            {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n            <span class=\"dropdown-icon\">\r\n              <ng-container *ngIf=\"!showAllCategories\">\r\n                <mat-icon>expand_more</mat-icon>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"showAllCategories\">\r\n                <mat-icon>expand_less</mat-icon>\r\n              </ng-container>\r\n            </span>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"collectionsCollapsed = !collectionsCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop by Collections</b></h6>\r\n        <mat-icon>{{ collectionsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!collectionsCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n          (click)=\"applyFilter(collection, 'FILTER')\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"collection.status\" />\r\n          <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n        </div>\r\n        <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n          [style.color]=\"styles?.background?.accentColor\">\r\n          <span class=\"toggle-text\">\r\n            {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n            <span class=\"dropdown-icon\">\r\n              <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n              <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n            </span>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"(brands?.length ?? 0) > 1\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"brandsCollapsed = !brandsCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop by Brand</b></h6>\r\n        <mat-icon>{{ brandsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!brandsCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let brand of displayedBrands\"\r\n          (click)=\"applyFilter(brand, 'FILTER')\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"brand.status\" />\r\n          <div class=\"trim-text\">{{brand.option | titlecase}}</div>\r\n        </div>\r\n        <div *ngIf=\"brands.length > 4\" class=\"toggle-categories\" (click)=\"toggleBrands()\"\r\n          [style.color]=\"styles?.background?.accentColor\">\r\n          <span class=\"toggle-text\">\r\n            {{ showAllBrands ? 'Show Less' : 'Show More' }}\r\n            <span class=\"dropdown-icon\">\r\n              <ng-container *ngIf=\"!showAllBrands\"><mat-icon>expand_more</mat-icon></ng-container>\r\n              <ng-container *ngIf=\"showAllBrands\"><mat-icon>expand_less</mat-icon></ng-container>\r\n            </span>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Ratings</b></h6>\r\n        <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!ratingsCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"rating.selected\" />\r\n          <div class=\"trim-text\">{{ rating.label }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop by price</b></h6>\r\n        <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!priceCollapsed\">\r\n        <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n          <div class=\"trim-text\">{{ range.label }}</div>\r\n        </label>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- Server-driven filters from query-options (Specifications, Item Type, ...). Empty for unseeded businesses. -->\r\n    <div class=\"categories-section\" *ngFor=\"let group of customFilterGroups\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"customGroupCollapsed[group.key] = !customGroupCollapsed[group.key]\" style=\"cursor:pointer\">\r\n        <h6><b>{{ group.label }}</b></h6>\r\n        <mat-icon>{{ customGroupCollapsed[group.key] ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!customGroupCollapsed[group.key]\">\r\n        <ng-container *ngFor=\"let filter of group.filters\">\r\n          <div *ngIf=\"group.filters.length > 1\" class=\"trim-text\" style=\"font-weight: 600; margin-top: 8px;\">\r\n            {{ filter.label }}\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"filter.control === 'RANGE'; else customChoices\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-top: 6px;\">\r\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\r\n                [attr.max]=\"filter.max\" [placeholder]=\"'Min ' + (filter.min ?? '')\"\r\n                [ngModel]=\"customRange(filter.identifier).min\"\r\n                (change)=\"setCustomRange(filter.identifier, 'min', $any($event.target).value)\" />\r\n              <span>-</span>\r\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\r\n                [attr.max]=\"filter.max\" [placeholder]=\"'Max ' + (filter.max ?? '')\"\r\n                [ngModel]=\"customRange(filter.identifier).max\"\r\n                (change)=\"setCustomRange(filter.identifier, 'max', $any($event.target).value)\" />\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-template #customChoices>\r\n            <ng-container *ngIf=\"filter.control === 'BOOLEAN' && !filter.choices?.length; else choiceList\">\r\n              <label class=\"category-options\">\r\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, 'true')\"\r\n                  (change)=\"toggleCustomChoice(filter, 'true')\" />\r\n                <div class=\"trim-text\">Yes</div>\r\n              </label>\r\n            </ng-container>\r\n            <ng-template #choiceList>\r\n              <label class=\"category-options\" *ngFor=\"let choice of filter.choices\">\r\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, choice.value)\"\r\n                  (change)=\"toggleCustomChoice(filter, choice.value)\" />\r\n                <div class=\"trim-text\">{{ choice.label }} <span *ngIf=\"choice.count !== undefined\">({{ choice.count }})</span></div>\r\n              </label>\r\n            </ng-template>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Product Type</b></h6>\r\n        <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!productTypeCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop for</b></h6>\r\n        <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!shopForCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Material</b></h6>\r\n        <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!materialCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Metal</b></h6>\r\n        <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!metalCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Ring Style</b></h6>\r\n        <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!ringStyleCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n        [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <ng-template #theme1style1>\r\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n        <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n          <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n          <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div class=\"mt-2 w-100\">\r\n        <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n          <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n              (click)=\"selectVarient(product, varient)\">\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n          <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n            <div class=\"fs-16\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n            </div>\r\n\r\n            <div class=\"fs-16 text-start\">\r\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n                {{product?.price?.value | number:'1.0-0'}}\r\n              </span>\r\n            </div>\r\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product.price.sellingPrice | number:'1.0-0'}}\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n          <div class=\"material-info\"\r\n            *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\r\n            <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\r\n            <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\r\n            <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section\"\r\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n    <div class=\"row w-100\">\r\n      <div class=\"col-8 d-flex flex-column gap-3\">\r\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n        <div class=\"fs-16 text-start\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n        </div>\r\n        <div class=\"d-flex w-45\">\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn w-100\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section w-100\"\r\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4 h-100 position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\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\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n  <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n    [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n    [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n    [spacingHorizontal]=\"stylesLayout\">\r\n\r\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\"\r\n        [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n    </div> -->\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n          CLEAR ALL\r\n        </div>\r\n      </div>\r\n      <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n        style=\"width: 77.5%; margin-right: 1%;\">\r\n        <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\"></div>\r\n        <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n          <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n          <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n          </select>\r\n        </div> -->\r\n        <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n          <span class=\"sort-label\">Sort By:</span>\r\n          <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n          <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\r\n\r\n          <div class=\"options\" *ngIf=\"isOpen\">\r\n            <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n              (click)=\"selectOption(filter, $event)\">\r\n              {{ filter.name }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-product-section\">\r\n      <div class=\"filter-side\">\r\n        <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n      </div>\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\r\n        #listScrollContainer>\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n            <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n              [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n              <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n                <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n                  [index]=\"i\"></simpo-small-product-listing>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n          <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n                  src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n                  alt=\"\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <div class=\"heading-medium d-flex justify-content-center\">\r\n                  Product list is empty\r\n                </div>\r\n                <div class=\"description d-flex justify-content-center mt-4\">\r\n                  Looks like no item is present with filter. Go ahead & explore top categories.\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </ng-container>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n      </div>\r\n\r\n      <div class=\"bottom-filter\">\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n          <mat-icon>sort</mat-icon>\r\n          <span>Sort by</span>\r\n        </div>\r\n        <div class=\"divider\"></div>\r\n        <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n          <mat-icon>filter_list</mat-icon>\r\n          <span>Filter</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n        [isEcommerce]=\"true\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n  [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n  <div class=\"fav-icon-wrapper\">\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n    </mat-icon>\r\n    <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n      (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n    </mat-icon>\r\n    <span class=\"fav-tooltip\">\r\n      {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n  <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\r\n    <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\r\n      [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\r\n      [style.color]=\"getTextColor(styles?.background?.accentColor)\">\r\n      {{ tag }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n  <section>\r\n    <!-- Server-driven filters from query-options (Brand, Categories, Collections, Specifications, ...).\r\n         Empty for unseeded businesses, in which case the legacy blocks below are the sidebar. -->\r\n    <div class=\"categories-section\" *ngFor=\"let group of customFilterGroups\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"customGroupCollapsed[group.key] = !customGroupCollapsed[group.key]\" style=\"cursor:pointer\">\r\n        <h6><b>{{ group.label }}</b></h6>\r\n        <mat-icon>{{ customGroupCollapsed[group.key] ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!customGroupCollapsed[group.key]\">\r\n        <ng-container *ngFor=\"let filter of group.filters\">\r\n          <div *ngIf=\"group.filters.length > 1\" class=\"trim-text\" style=\"font-weight: 600; margin-top: 8px;\">\r\n            {{ filter.label }}\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"filter.control === 'RANGE'; else customChoices\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-top: 6px;\">\r\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\r\n                [attr.max]=\"filter.max\" [placeholder]=\"'Min ' + (filter.min ?? '')\"\r\n                [ngModel]=\"customRange(filter.identifier).min\"\r\n                (change)=\"setCustomRange(filter.identifier, 'min', $any($event.target).value)\" />\r\n              <span>-</span>\r\n              <input type=\"number\" class=\"form-control\" style=\"min-width: 0;\" [attr.min]=\"filter.min\"\r\n                [attr.max]=\"filter.max\" [placeholder]=\"'Max ' + (filter.max ?? '')\"\r\n                [ngModel]=\"customRange(filter.identifier).max\"\r\n                (change)=\"setCustomRange(filter.identifier, 'max', $any($event.target).value)\" />\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-template #customChoices>\r\n            <ng-container *ngIf=\"filter.control === 'BOOLEAN' && !filter.choices?.length; else choiceList\">\r\n              <label class=\"category-options\">\r\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, 'true')\"\r\n                  (change)=\"toggleCustomChoice(filter, 'true')\" />\r\n                <div class=\"trim-text\">Yes</div>\r\n              </label>\r\n            </ng-container>\r\n            <ng-template #choiceList>\r\n              <label class=\"category-options\" *ngFor=\"let choice of filter.choices\">\r\n                <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n                  [checked]=\"isCustomChoiceSelected(filter.identifier, choice.value)\"\r\n                  (change)=\"toggleCustomChoice(filter, choice.value)\" />\r\n                <div class=\"trim-text\">{{ choice.label }} <span *ngIf=\"choice.count !== undefined\">({{ choice.count }})</span></div>\r\n              </label>\r\n            </ng-template>\r\n          </ng-template>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- No legacy Categories block: categories are shown only when query-options returns them. -->\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Product Type</b></h6>\r\n        <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!productTypeCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop for</b></h6>\r\n        <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!shopForCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Material</b></h6>\r\n        <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!materialCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Metal</b></h6>\r\n        <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!metalCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Ring Style</b></h6>\r\n        <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!ringStyleCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n          <div class=\"trim-text\">{{ size.size }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- Ratings and price stay at the bottom, below the server-driven filters. -->\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Ratings</b></h6>\r\n        <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!ratingsCollapsed\">\r\n        <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [checked]=\"rating.selected\" />\r\n          <div class=\"trim-text\">{{ rating.label }}</div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n        (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\r\n        <h6><b>Shop by price</b></h6>\r\n        <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n      </div>\r\n      <ng-container *ngIf=\"!priceCollapsed\">\r\n        <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n          <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n            [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n          <div class=\"trim-text\">{{ range.label }}</div>\r\n        </label>\r\n      </ng-container>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n  <section style=\"padding: 10px\">\r\n    <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n      <span>Sort by</span>\r\n      <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n    </div>\r\n    <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n      <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n        [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n    </mat-radio-group>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n  <ng-template #theme1style1>\r\n    <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n      <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n        class=\"default-image position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n        <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n          <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n          <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n        <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n      </div>\r\n\r\n      <div class=\"mt-2 w-100\">\r\n        <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n          <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n              [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n              [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n              [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n              (click)=\"selectVarient(product, varient)\">\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n          <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n            <div class=\"fs-16\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n            </div>\r\n\r\n            <div class=\"fs-16 text-start\">\r\n              <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n                {{product?.price?.value | number:'1.0-0'}}\r\n              </span>\r\n            </div>\r\n            <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n              <span [innerHTML]='currency'></span>\r\n              {{product.price.sellingPrice | number:'1.0-0'}}\r\n            </div> -->\r\n          </div>\r\n\r\n          <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n            [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n          <div class=\"material-info\"\r\n            *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\r\n            <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\r\n            <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\r\n            <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\r\n          </div>\r\n\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section\"\r\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n    <div class=\"row w-100\">\r\n      <div class=\"col-8 d-flex flex-column gap-3\">\r\n        <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n        <div class=\"fs-16 text-start\">\r\n          <span [innerHTML]='currency'></span>\r\n          {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n        </div>\r\n        <div class=\"d-flex w-45\">\r\n          <div\r\n            *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n            class=\"add-to-cart-btn w-100\">\r\n            <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n              simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n              [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n              [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n              *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n              (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n            <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n              [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n              [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n            <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n              [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\"\r\n                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n              <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n              <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n                [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n          </div>\r\n          <div class=\"try-button-section w-100\"\r\n            *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n            <div class=\"try-at-home\">\r\n              <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n                (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n                [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n                HOME</button>\r\n            </div>\r\n            <div class=\"video-call-image\">\r\n              <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n                alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-4 h-100 position-relative\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n          (click)=\"proceedToProductDesc(product)\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n  </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\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]