simpo-component-library 3.6.537 → 3.6.538

package/fesm2022/simpo-component-library.mjs

@@ -18151,7 +18151,7 @@ class ProductDescComponent extends BaseSection {
         return { ...this.styles?.layout };
     }
     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$2.Meta }, { token: i1$2.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$1.MatDialog }], 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: "d2", first: true, predicate: ["d2"], 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\"\r\n    simpoHover (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\"  [simpoLayout]=\"styles?.layout\">\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 h-100 w-100\" style=\"margin-top: 25px;height: 100%;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-4 col-12 h-100 product-detail\">\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\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"toShowInJewellery\">\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\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          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </ng-container>\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <div class=\"product-sku\">\r\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n            <!-- <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div> -->\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\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      <ng-container>\r\n        <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n      </ng-container>\r\n    </section>\r\n    <!-- <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\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 && !ecomConfigs?.videoCallEnabled\"\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 && ecomConfigs?.videoCallEnabled\" 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 ? openDialogBox(dialogBox) : ''\">\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 == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\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 && !ecomConfigs?.videoCallEnabled\"\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 && ecomConfigs?.videoCallEnabled\" 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 ? openDialogBox(dialogBox) : ''\">\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\">\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 border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\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 class=\"share-product\">\r\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        [style.borderColor]=\"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-15\">\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-600\">\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=\"d-flex flex-column\" style=\"margin-top: 15px;\">\r\n    <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\r\n      *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n        getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice}}</div>\r\n      <div class=\"price\"\r\n        [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\r\n        *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.value | number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n  </div>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <ng-container *ngIf=\"toShowInJewellery\">\r\n    <div class=\"discount\">\r\n      <p>Flat 30% off on Diamond Prices</p>\r\n      <p class=\"offer\">Offer Expires in 4 days</p>\r\n    </div>\r\n    <div class=\"ring-size-video\">\r\n      <p class=\"text\">Not sure about the ring size?</p>\r\n      <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\r\n        <mat-icon>play_circle_outline</mat-icon>\r\n      </p>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc\">\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=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [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\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\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.materialType | 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/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\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.materialPurity}}\r\n                  </div>\r\n                </div>\r\n                <!-- <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Price/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                    number:'1.2-2'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Value\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n                  </div>\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- <div class=\"jewel-container mt-2\">\r\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n              Making Charges\r\n            </div>\r\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Net Weight\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.baseWeight}} </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Making Charge %\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.makingChargePercentage}}\r\n                </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Value\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n\r\n    <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></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=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          [simpoCorner]=\"styles?.corners\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"row h-100 mt-0 w-100\">\r\n      <ng-container *ngIf=\"itemImages?.length == 0\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n          [class.h-100]=\"itemImages?.length == 1\">\r\n      </ng-container>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n\r\n\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      'position': 'relative',\r\n      'right': '5px'\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 br-50\">\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=\"ecomConfigs?.videoCallEnabled\" -->\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/355007c175362077266611289-229221023_small.gif\"\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\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n          Schedule a Video Call\r\n        </button>\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\">\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 w-90\">\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\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n    <ng-container>\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\">\uD83C\uDF81</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            Order will\r\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | 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      <!-- Nearest Store Section -->\r\n      <ng-container\r\n        *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n        <div class=\"store-section\">\r\n          <div class=\"d-flex align-items-center store-item\">\r\n            <span class=\"store-icon\">\uD83C\uDFEA</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?.name | 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?.storeId)\">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\">\uD83C\uDFEA</span>\r\n            <span class=\"delivery-text\">No Stores are available</span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\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\">\uD83C\uDFE0</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\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n            HOME</button>\r\n          <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\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 f-18\">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]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [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<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n                <mat-icon>video_call</mat-icon>&nbsp;\r\n                SCHEDULE A VIDEO CALL\r\n              </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\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 f-18\">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.materialPurity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</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\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"w-100 row review-section\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\r\n    *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n    <div class=\"col-md-3 col-sm-12\">\r\n      <div class=\"cust-header\">Customer Reviews</div>\r\n      <div class=\"d-flex gap-3 mb-1\">\r\n        <ng-container *ngIf=\"responseData?.averageRating\">\r\n          <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n        </ng-container>\r\n        <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n      </div>\r\n      <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n      <div class=\"ratings-percentage\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n            <span>{{rating + \" star\"}}</span>\r\n            <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n              <div [style.width.%]=\"getPercentage(rating)\"\r\n                [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n            </div>\r\n            <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-9 col-sm-12\">\r\n      <div class=\"review-header\">Latest Reviews</div>\r\n      <div class=\"review-body d-flex flex-column gap-3\">\r\n        <ng-container *ngFor=\"let review of reviewsData\">\r\n          <div class=\"review-container w-75\">\r\n            <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n              <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n                class=\"width-30 h-25 mr-2\">\r\n              <span>{{review?.userName ?? \"-\"}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"review?.rating\">\r\n              <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </ng-container>\r\n            <div class=\"review-desc\">\r\n              {{review?.review ?? \"-\"}}\r\n            </div>\r\n            <div class=\"review-img\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\r\n                (click)=\"showDetailReview(review)\">\r\n              <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\r\n                id=\"openReviewDetail\"></button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\r\n          [style.color]=\"data?.styles?.background?.accentColor\">\r\n          See more reviews <span>></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\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}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::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{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{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;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%;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.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}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.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}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;gap: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,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.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}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.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;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.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}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll}.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}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.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}.br-50{border-radius:50%}.w-15{width:22%!important}.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}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;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:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.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:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.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;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.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}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.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)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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$1.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: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$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: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.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: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    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: "d2", first: true, predicate: ["d2"], 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\"\r\n    simpoHover (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\"  [simpoLayout]=\"styles?.layout\">\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 h-100 w-100\" style=\"margin-top: 25px;height: 100%;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block overflow-scroll\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-4 col-12 h-100 product-detail\">\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\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"toShowInJewellery\">\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\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          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </ng-container>\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <div class=\"product-sku\">\r\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n            <!-- <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div> -->\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\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      <ng-container>\r\n        <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n      </ng-container>\r\n    </section>\r\n    <!-- <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\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 && !ecomConfigs?.videoCallEnabled\"\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 && ecomConfigs?.videoCallEnabled\" 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 ? openDialogBox(dialogBox) : ''\">\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 == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\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 && !ecomConfigs?.videoCallEnabled\"\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 && ecomConfigs?.videoCallEnabled\" 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 ? openDialogBox(dialogBox) : ''\">\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\">\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 border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\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 class=\"share-product\">\r\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        [style.borderColor]=\"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-15\">\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-600\">\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=\"d-flex flex-column\" style=\"margin-top: 15px;\">\r\n    <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\r\n      *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n        getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice}}</div>\r\n      <div class=\"price\"\r\n        [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\r\n        *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.value | number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n  </div>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <ng-container *ngIf=\"toShowInJewellery\">\r\n    <div class=\"discount\">\r\n      <p>Flat 30% off on Diamond Prices</p>\r\n      <p class=\"offer\">Offer Expires in 4 days</p>\r\n    </div>\r\n    <div class=\"ring-size-video\">\r\n      <p class=\"text\">Not sure about the ring size?</p>\r\n      <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\r\n        <mat-icon>play_circle_outline</mat-icon>\r\n      </p>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\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=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [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\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\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.materialType | 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/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\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.materialPurity}}\r\n                  </div>\r\n                </div>\r\n                <!-- <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Price/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                    number:'1.2-2'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Value\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n                  </div>\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- <div class=\"jewel-container mt-2\">\r\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n              Making Charges\r\n            </div>\r\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Net Weight\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.baseWeight}} </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Making Charge %\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.makingChargePercentage}}\r\n                </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Value\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n\r\n    <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></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=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          [simpoCorner]=\"styles?.corners\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"row h-100 mt-0 w-100\">\r\n      <ng-container *ngIf=\"itemImages?.length == 0\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n          [class.h-100]=\"itemImages?.length == 1\">\r\n      </ng-container>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n\r\n\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      'position': 'relative',\r\n      'right': '5px'\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 br-50\">\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=\"ecomConfigs?.videoCallEnabled\" -->\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/355007c175362077266611289-229221023_small.gif\"\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\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n          Schedule a Video Call\r\n        </button>\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\">\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 w-90\">\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\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n    <ng-container>\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\">\uD83C\uDF81</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            Order will\r\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | 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      <!-- Nearest Store Section -->\r\n      <ng-container\r\n        *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n        <div class=\"store-section\">\r\n          <div class=\"d-flex align-items-center store-item\">\r\n            <span class=\"store-icon\">\uD83C\uDFEA</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?.name | 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?.storeId)\">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\">\uD83C\uDFEA</span>\r\n            <span class=\"delivery-text\">No Stores are available</span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\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\">\uD83C\uDFE0</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\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n            HOME</button>\r\n          <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\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 f-18\">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]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [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<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n                <mat-icon>video_call</mat-icon>&nbsp;\r\n                SCHEDULE A VIDEO CALL\r\n              </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\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 f-18\">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.materialPurity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</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\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"w-100 row review-section mt-3\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\r\n    *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n    <div class=\"col-md-3 col-sm-12\">\r\n      <div class=\"cust-header\">Customer Reviews</div>\r\n      <div class=\"d-flex gap-3 mb-1\">\r\n        <ng-container *ngIf=\"responseData?.averageRating\">\r\n          <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n        </ng-container>\r\n        <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n      </div>\r\n      <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n      <div class=\"ratings-percentage\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n            <span>{{rating + \" star\"}}</span>\r\n            <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n              <div [style.width.%]=\"getPercentage(rating)\"\r\n                [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n            </div>\r\n            <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-9 col-sm-12\">\r\n      <div class=\"review-header\">Latest Reviews</div>\r\n      <div class=\"review-body d-flex flex-column gap-3\">\r\n        <ng-container *ngFor=\"let review of reviewsData\">\r\n          <div class=\"review-container w-75\">\r\n            <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n              <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n                class=\"width-30 h-25 mr-2\">\r\n              <span>{{review?.userName ?? \"-\"}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"review?.rating\">\r\n              <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </ng-container>\r\n            <div class=\"review-desc\">\r\n              {{review?.review ?? \"-\"}}\r\n            </div>\r\n            <div class=\"review-img\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\r\n                (click)=\"showDetailReview(review)\">\r\n              <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\r\n                id=\"openReviewDetail\"></button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\r\n          [style.color]=\"data?.styles?.background?.accentColor\">\r\n          See more reviews <span>></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\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}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::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{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{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;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%;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.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}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.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}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600;margin-top:5px}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;gap: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,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.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}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.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;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.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}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll}.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}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.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}.br-50{border-radius:50%}.w-15{width:22%!important}.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}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;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:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.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:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.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;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.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}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.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)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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$1.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: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$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: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.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: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -18181,7 +18181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CornerDirective,
                         ButtonEditorDirective,
                         SpacingHorizontalDirective
-                    ], 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\"\r\n    simpoHover (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\"  [simpoLayout]=\"styles?.layout\">\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 h-100 w-100\" style=\"margin-top: 25px;height: 100%;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-4 col-12 h-100 product-detail\">\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\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"toShowInJewellery\">\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\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          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </ng-container>\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <div class=\"product-sku\">\r\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n            <!-- <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div> -->\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\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      <ng-container>\r\n        <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n      </ng-container>\r\n    </section>\r\n    <!-- <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\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 && !ecomConfigs?.videoCallEnabled\"\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 && ecomConfigs?.videoCallEnabled\" 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 ? openDialogBox(dialogBox) : ''\">\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 == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\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 && !ecomConfigs?.videoCallEnabled\"\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 && ecomConfigs?.videoCallEnabled\" 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 ? openDialogBox(dialogBox) : ''\">\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\">\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 border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\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 class=\"share-product\">\r\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        [style.borderColor]=\"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-15\">\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-600\">\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=\"d-flex flex-column\" style=\"margin-top: 15px;\">\r\n    <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\r\n      *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n        getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice}}</div>\r\n      <div class=\"price\"\r\n        [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\r\n        *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.value | number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n  </div>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <ng-container *ngIf=\"toShowInJewellery\">\r\n    <div class=\"discount\">\r\n      <p>Flat 30% off on Diamond Prices</p>\r\n      <p class=\"offer\">Offer Expires in 4 days</p>\r\n    </div>\r\n    <div class=\"ring-size-video\">\r\n      <p class=\"text\">Not sure about the ring size?</p>\r\n      <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\r\n        <mat-icon>play_circle_outline</mat-icon>\r\n      </p>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n  <div class=\"row prod-desc\">\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=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [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\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\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.materialType | 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/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\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.materialPurity}}\r\n                  </div>\r\n                </div>\r\n                <!-- <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Price/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                    number:'1.2-2'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Value\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n                  </div>\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- <div class=\"jewel-container mt-2\">\r\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n              Making Charges\r\n            </div>\r\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Net Weight\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.baseWeight}} </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Making Charge %\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.makingChargePercentage}}\r\n                </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Value\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n\r\n    <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></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=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          [simpoCorner]=\"styles?.corners\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"row h-100 mt-0 w-100\">\r\n      <ng-container *ngIf=\"itemImages?.length == 0\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n          [class.h-100]=\"itemImages?.length == 1\">\r\n      </ng-container>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n\r\n\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      'position': 'relative',\r\n      'right': '5px'\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 br-50\">\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=\"ecomConfigs?.videoCallEnabled\" -->\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/355007c175362077266611289-229221023_small.gif\"\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\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n          Schedule a Video Call\r\n        </button>\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\">\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 w-90\">\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\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n    <ng-container>\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\">\uD83C\uDF81</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            Order will\r\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | 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      <!-- Nearest Store Section -->\r\n      <ng-container\r\n        *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n        <div class=\"store-section\">\r\n          <div class=\"d-flex align-items-center store-item\">\r\n            <span class=\"store-icon\">\uD83C\uDFEA</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?.name | 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?.storeId)\">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\">\uD83C\uDFEA</span>\r\n            <span class=\"delivery-text\">No Stores are available</span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\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\">\uD83C\uDFE0</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\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n            HOME</button>\r\n          <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\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 f-18\">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]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [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<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n                <mat-icon>video_call</mat-icon>&nbsp;\r\n                SCHEDULE A VIDEO CALL\r\n              </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\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 f-18\">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.materialPurity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</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\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"w-100 row review-section\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\r\n    *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n    <div class=\"col-md-3 col-sm-12\">\r\n      <div class=\"cust-header\">Customer Reviews</div>\r\n      <div class=\"d-flex gap-3 mb-1\">\r\n        <ng-container *ngIf=\"responseData?.averageRating\">\r\n          <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n        </ng-container>\r\n        <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n      </div>\r\n      <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n      <div class=\"ratings-percentage\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n            <span>{{rating + \" star\"}}</span>\r\n            <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n              <div [style.width.%]=\"getPercentage(rating)\"\r\n                [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n            </div>\r\n            <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-9 col-sm-12\">\r\n      <div class=\"review-header\">Latest Reviews</div>\r\n      <div class=\"review-body d-flex flex-column gap-3\">\r\n        <ng-container *ngFor=\"let review of reviewsData\">\r\n          <div class=\"review-container w-75\">\r\n            <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n              <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n                class=\"width-30 h-25 mr-2\">\r\n              <span>{{review?.userName ?? \"-\"}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"review?.rating\">\r\n              <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </ng-container>\r\n            <div class=\"review-desc\">\r\n              {{review?.review ?? \"-\"}}\r\n            </div>\r\n            <div class=\"review-img\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\r\n                (click)=\"showDetailReview(review)\">\r\n              <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\r\n                id=\"openReviewDetail\"></button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\r\n          [style.color]=\"data?.styles?.background?.accentColor\">\r\n          See more reviews <span>></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\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}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::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{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{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;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%;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.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}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.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}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;gap: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,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.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}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.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;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.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}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll}.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}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.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}.br-50{border-radius:50%}.w-15{width:22%!important}.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}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;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:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.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:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.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;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.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}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.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)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.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}\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\"\r\n    simpoHover (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\"  [simpoLayout]=\"styles?.layout\">\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 h-100 w-100\" style=\"margin-top: 25px;height: 100%;\" class=\"above-height\"\r\n        [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block overflow-scroll\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-4 col-12 h-100 product-detail\">\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\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n\r\n          <ng-container *ngIf=\"toShowInJewellery\">\r\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\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          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n          </ng-container>\r\n\r\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n            [innerHTML]=\"responseData.brief\"></div> -->\r\n          <div class=\"product-sku\">\r\n            <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n            <!-- <div\r\n              *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n              Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div> -->\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\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      <ng-container>\r\n        <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n      </ng-container>\r\n    </section>\r\n    <!-- <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\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 && !ecomConfigs?.videoCallEnabled\"\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 && ecomConfigs?.videoCallEnabled\" 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 ? openDialogBox(dialogBox) : ''\">\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 == 0 && reviewDescription?.length == 0\">Submit\r\n            review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\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 && !ecomConfigs?.videoCallEnabled\"\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 && ecomConfigs?.videoCallEnabled\" 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 ? openDialogBox(dialogBox) : ''\">\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\">\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 border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\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 class=\"share-product\">\r\n      <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        [style.borderColor]=\"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-15\">\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-600\">\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=\"d-flex flex-column\" style=\"margin-top: 15px;\">\r\n    <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\r\n      *ngIf=\"responseData?.averageRating  && responseData?.totalReviewCount\"\r\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n      <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n      <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n        getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center gap-2\">\r\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\r\n          [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice}}</div>\r\n      <div class=\"price\"\r\n        [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\r\n        *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.value | number:'1.0-0'}}\r\n      </div>\r\n    </div>\r\n    <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n  </div>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n  <ng-container *ngIf=\"toShowInJewellery\">\r\n    <div class=\"discount\">\r\n      <p>Flat 30% off on Diamond Prices</p>\r\n      <p class=\"offer\">Offer Expires in 4 days</p>\r\n    </div>\r\n    <div class=\"ring-size-video\">\r\n      <p class=\"text\">Not sure about the ring size?</p>\r\n      <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\r\n        <mat-icon>play_circle_outline</mat-icon>\r\n      </p>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\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=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRightPriceBreakup\" [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\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n      </div>\r\n      <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\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.materialType | 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/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    {{ele.primaryMaterialWeight + \" \" + 'grams'}}\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.materialPurity}}\r\n                  </div>\r\n                </div>\r\n                <!-- <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Price/Gram\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n                    number:'1.2-2'}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-4\">\r\n                  <div class=\"row-header\">\r\n                    Value\r\n                  </div>\r\n                  <div class=\"row-content\">\r\n                    \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n                  </div>\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <!-- <div class=\"jewel-container mt-2\">\r\n            <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n              Making Charges\r\n            </div>\r\n            <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Net Weight\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.baseWeight}} </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Making Charge %\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  {{responseData?.makingChargePercentage}}\r\n                </div>\r\n              </div>\r\n              <div class=\"col-4\">\r\n                <div class=\"row-header\">\r\n                  Value\r\n                </div>\r\n                <div class=\"row-content\">\r\n                  \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div> -->\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n\r\n    <!-- <div class=\"tab-group\">\r\n          <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></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=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n          [simpoCorner]=\"styles?.corners\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n    <div class=\"row h-100 mt-0 w-100\">\r\n      <ng-container *ngIf=\"itemImages?.length == 0\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n          [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n          [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n          [class.h-100]=\"itemImages?.length == 1\">\r\n      </ng-container>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n\r\n\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      'position': 'relative',\r\n      'right': '5px'\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 br-50\">\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=\"ecomConfigs?.videoCallEnabled\" -->\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/355007c175362077266611289-229221023_small.gif\"\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\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n          Schedule a Video Call\r\n        </button>\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\">\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 w-90\">\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\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n        </div>\r\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\r\n      </div>\r\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n    </div>\r\n    <ng-container>\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\">\uD83C\uDF81</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n            Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n            Order will\r\n            Deliver by {{ storeDetails?.estimatedDeliveryDate | 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      <!-- Nearest Store Section -->\r\n      <ng-container\r\n        *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n        <div class=\"store-section\">\r\n          <div class=\"d-flex align-items-center store-item\">\r\n            <span class=\"store-icon\">\uD83C\uDFEA</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?.name | 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?.storeId)\">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\">\uD83C\uDFEA</span>\r\n            <span class=\"delivery-text\">No Stores are available</span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\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\">\uD83C\uDFE0</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\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n            HOME</button>\r\n          <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n  </div>\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 f-18\">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]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [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<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n                <mat-icon>video_call</mat-icon>&nbsp;\r\n                SCHEDULE A VIDEO CALL\r\n              </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\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 f-18\">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.materialPurity | titlecase }}</div>\r\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n            number:'1.2-2' }}</div>\r\n          <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</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\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n  <div class=\"w-100 row review-section mt-3\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\r\n    *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n    <div class=\"col-md-3 col-sm-12\">\r\n      <div class=\"cust-header\">Customer Reviews</div>\r\n      <div class=\"d-flex gap-3 mb-1\">\r\n        <ng-container *ngIf=\"responseData?.averageRating\">\r\n          <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n        </ng-container>\r\n        <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n      </div>\r\n      <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n      <div class=\"ratings-percentage\">\r\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n          <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n            <span>{{rating + \" star\"}}</span>\r\n            <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n              <div [style.width.%]=\"getPercentage(rating)\"\r\n                [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n            </div>\r\n            <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-9 col-sm-12\">\r\n      <div class=\"review-header\">Latest Reviews</div>\r\n      <div class=\"review-body d-flex flex-column gap-3\">\r\n        <ng-container *ngFor=\"let review of reviewsData\">\r\n          <div class=\"review-container w-75\">\r\n            <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n              <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n                class=\"width-30 h-25 mr-2\">\r\n              <span>{{review?.userName ?? \"-\"}}</span>\r\n            </div>\r\n            <ng-container *ngIf=\"review?.rating\">\r\n              <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n            </ng-container>\r\n            <div class=\"review-desc\">\r\n              {{review?.review ?? \"-\"}}\r\n            </div>\r\n            <div class=\"review-img\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\r\n                (click)=\"showDetailReview(review)\">\r\n              <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\r\n                id=\"openReviewDetail\"></button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\r\n          [style.color]=\"data?.styles?.background?.accentColor\">\r\n          See more reviews <span>></span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\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}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::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{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{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;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%;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.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}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.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}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:20px;font-weight:600;margin-top:5px}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;gap: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,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.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}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.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;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.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}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll}.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}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.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}.br-50{border-radius:50%}.w-15{width:22%!important}.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}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;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:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.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:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.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;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.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}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.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)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.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}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -19144,7 +19144,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$3.MatBottomSheet }, { token: i1$1.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }], 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($event)", "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        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\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 filteredChips\">\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 filteredChips\">\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\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\r\n            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\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=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</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\">\r\n        <h6><b>Shop by categories</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by collections</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\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    </div>\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Product Type</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop for</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Material</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Metal</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ring Style</b></h6>\r\n      </div>\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    </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\"\r\n        (click)=\"selectOption(sortingType, $event)\" [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  <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.itemId)\" [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\" 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.itemId)\" [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.2-2'}}\r\n          </div>\r\n\r\n          <div class=\"fs-16\">\r\n            <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n              {{product?.price?.value | number:'1.2-2'}}\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.2-2'}}\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\r\n          *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n          class=\"add-to-cart-btn\">\r\n          <button class=\"send-btn p-2\" [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)\" *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 && ecomConfigs?.appointmentBookingEnabled && 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\" alt=\"video\"\r\n              (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n            [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <mat-icon>video_call</mat-icon>&nbsp;\r\n              SCHEDULE A VIDEO CALL\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", 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%}.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;color:#fff;background:#05a702;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}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;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:10px;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);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;width:48%!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,.add-to-cart-btn button{font-size:14px!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:3rem}}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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$1.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: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { 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$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.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: i9$1.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"] }, { 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($event)", "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        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\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 filteredChips\">\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 filteredChips\">\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\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\r\n            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\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=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</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\">\r\n        <h6><b>Shop by Categories</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Collections</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ratings</b></h6>\r\n      </div>\r\n      <div class=\"category-options\"\r\n        *ngFor=\"let size of ['5 Stars', '4 Stars above', '3 Stars above', '2 Stars above', '1 Star above']\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\" />\r\n        <div class=\"trim-text\">{{ size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\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    </div>\r\n\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Product Type</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop for</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Material</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Metal</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ring Style</b></h6>\r\n      </div>\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    </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  <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.itemId)\" [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\" 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.itemId)\" [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.2-2'}}\r\n          </div>\r\n\r\n          <div class=\"fs-16\">\r\n            <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n              {{product?.price?.value | number:'1.2-2'}}\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.2-2'}}\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\r\n          *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n          class=\"add-to-cart-btn\">\r\n          <button class=\"send-btn p-2\" [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)\" *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 && ecomConfigs?.appointmentBookingEnabled && 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\" alt=\"video\"\r\n              (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n            [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <mat-icon>video_call</mat-icon>&nbsp;\r\n              SCHEDULE A VIDEO CALL\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", 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%}.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;color:#fff;background:#05a702;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}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;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:10px;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);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;width:48%!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,.add-to-cart-btn button{font-size:14px!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:3rem}}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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$1.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: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { 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$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.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: i9$1.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"] }, { 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,
@@ -19171,7 +19171,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        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\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 filteredChips\">\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 filteredChips\">\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\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\r\n            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\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=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</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\">\r\n        <h6><b>Shop by categories</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by collections</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\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    </div>\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Product Type</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop for</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Material</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Metal</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ring Style</b></h6>\r\n      </div>\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    </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\"\r\n        (click)=\"selectOption(sortingType, $event)\" [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  <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.itemId)\" [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\" 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.itemId)\" [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.2-2'}}\r\n          </div>\r\n\r\n          <div class=\"fs-16\">\r\n            <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n              {{product?.price?.value | number:'1.2-2'}}\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.2-2'}}\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\r\n          *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n          class=\"add-to-cart-btn\">\r\n          <button class=\"send-btn p-2\" [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)\" *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 && ecomConfigs?.appointmentBookingEnabled && 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\" alt=\"video\"\r\n              (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n            [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <mat-icon>video_call</mat-icon>&nbsp;\r\n              SCHEDULE A VIDEO CALL\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", 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%}.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;color:#fff;background:#05a702;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}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;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:10px;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);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;width:48%!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,.add-to-cart-btn button{font-size:14px!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:3rem}}.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}\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        style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\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 filteredChips\">\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 filteredChips\">\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\">\r\n        <ng-container *ngIf=\"!apiLoading\">\r\n          <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\r\n            (scroll)=\"handleProductListScroll()\" #listScrollContainer>\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=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</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\">\r\n        <h6><b>Shop by Categories</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by Collections</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ratings</b></h6>\r\n      </div>\r\n      <div class=\"category-options\"\r\n        *ngFor=\"let size of ['5 Stars', '4 Stars above', '3 Stars above', '2 Stars above', '1 Star above']\">\r\n        <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\" />\r\n        <div class=\"trim-text\">{{ size }}</div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"categories-section\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop by price</b></h6>\r\n      </div>\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    </div>\r\n\r\n\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Product Type</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Shop for</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Material</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Metal</b></h6>\r\n      </div>\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    </div>\r\n\r\n    <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n      <div class=\"categories heading-small\">\r\n        <h6><b>Ring Style</b></h6>\r\n      </div>\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    </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  <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.itemId)\" [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\" 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.itemId)\" [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.2-2'}}\r\n          </div>\r\n\r\n          <div class=\"fs-16\">\r\n            <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n              {{product?.price?.value | number:'1.2-2'}}\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.2-2'}}\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\r\n          *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n          class=\"add-to-cart-btn\">\r\n          <button class=\"send-btn p-2\" [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)\" *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 && ecomConfigs?.appointmentBookingEnabled && 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\" alt=\"video\"\r\n              (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-header d-flex align-item-center\">\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"matCloseDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n    </div>\r\n    <div class=\"modal-body h-100\">\r\n      <div class=\"row h-100 w-100 video-call-container\">\r\n        <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n          <img\r\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n            alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n        </div>\r\n        <div class=\"col-6 position-relative h-100 call-details\">\r\n          <!-- Name Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n            <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n              (input)=\"onInputChange('username')\">\r\n          </div>\r\n\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n            <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n              (input)=\"onInputChange('email')\">\r\n          </div>\r\n\r\n          <!-- Mobile Number Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n            <div class=\"sub-text-call\">IN +91</div>\r\n            <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n              (input)=\"onInputChange('mobileNumber')\">\r\n          </div>\r\n\r\n\r\n          <!-- Pincode Input with Validation -->\r\n          <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n            <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n              <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n            </div>\r\n            <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n              (input)=\"onInputChange('pincode')\">\r\n          </div>\r\n          <div class=\"language my-3\">\r\n            <div class=\"mini-text mb-2\">Language Preference</div>\r\n            <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n              <ng-container *ngFor=\"let lang of languages\">\r\n                <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                  [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectedLang = lang\"\r\n                  [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n                  {{lang}}\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n            <div class=\"input-field my-3\">\r\n              <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n            </div>\r\n          </ng-container>\r\n          <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n            [disabled]=\"isSubmitting\">\r\n            <ng-container *ngIf=\"isSubmitting\">\r\n              <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                <span class=\"visually-hidden\">Loading...</span>\r\n              </div>\r\n              SCHEDULING...\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n              <mat-icon>video_call</mat-icon>&nbsp;\r\n              SCHEDULE A VIDEO CALL\r\n            </ng-container>\r\n            <ng-container *ngIf=\"scheduled\">\r\n              <mat-icon>check_circle</mat-icon>&nbsp;\r\n              SCHEDULED SUCCESSFULLY\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>", 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%}.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;color:#fff;background:#05a702;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}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;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:10px;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);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;width:48%!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,.add-to-cart-btn button{font-size:14px!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:3rem}}.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}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]