simpo-component-library 3.6.214 → 3.6.216

package/fesm2022/simpo-component-library.mjs

@@ -1602,9 +1602,7 @@ class TextEditorComponent {
         return doc.body.innerHTML;
     }
     getText() {
-        const textContent = this.value
-            .replace(/<\/?[^>]+(>|$)/g, "")
-            .replace(/\s+/g, ' ').trim();
+        const textContent = this.value?.replace(/<\/?[^>]+(>|$)/g, "")?.replace(/\s+/g, ' ').trim() ?? "";
         if (!textContent) {
             return "";
         }
@@ -7768,9 +7766,15 @@ class CartComponent extends BaseSection {
         this.getTrialCart();
         this.getIndexDBData();
         this.getSchemeDetails();
+        this.getEcommerceConfigs();
         this.styles = this.data?.styles;
         // console.log(this.data)
     }
+    getEcommerceConfigs() {
+        this.restService.getEcommerceConfigs().subscribe((res) => {
+            this.ecomConfigs = res?.data;
+        });
+    }
     getSchemeDetails() {
         this.restService.getAllOrraScheme().subscribe((res) => {
             this.schemeList = [res.data];
@@ -8432,8 +8436,11 @@ class CartComponent extends BaseSection {
             this.cartInfo.billdetails.orraSchemeCode = scheme.GPPId;
         });
     }
+    getUrl() {
+        return window?.location?.origin?.includes('caratlane') || window?.location?.origin?.includes('orra');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i4$1.MessageService }, { token: i8$2.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ 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\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n      [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n      (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n        [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n        *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n        <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline isActive\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG'\">\r\n        <div class=\"cart-tabs\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n            (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n          <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n            ({{trialCartItem?.length ?? 0}})</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container>\r\n          <!-- <div class=\"left-panel\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items box-shadow\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice ?? item.sellingPrice) | number:\r\n                        '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\">\r\n                        <div class=\"d-flex align-items-center\"\r\n                          *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice ??\r\n                      item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\"\r\n                        [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div> -->\r\n          <!-- <div class=\"right-panel\">\r\n            <div class=\"coupons box-shadow\" (click)=\"openDialog(CouponList)\">\r\n              <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n                <div class=\"d-flex flex-column\">\r\n                  <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n                </div>\r\n                <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n                <div class=\"d-flex flex-column\">\r\n                  <span style=\"font-weight: 600;\">Coupon</span>\r\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n                </div>\r\n                <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"price-details box-shadow\">\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\">Total Price</div>\r\n                <div class=\"price-value\"><span [innerHTML]='currency'></span>\r\n                  {{(responseData?.billdetails?.totalNetValue\r\n                  ?? 0) | number: '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\">Total Tax</div>\r\n                <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ?\r\n                  responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n                  number:\r\n                  '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\"\r\n                *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n                <div class=\"price-type\">Delivery Charge</div>\r\n                <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges\r\n                  |\r\n                  number: '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\"\r\n                *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n                <div class=\"price-type\">Discount Amount</div>\r\n                <div class=\"price-value\"><span [innerHtml]='currency'></span>\r\n                  {{responseData?.billdetails?.discountAmount\r\n                  | number: '1.0-2'}}</div>\r\n              </div>\r\n              <hr>\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n                <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span>\r\n                  {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number:\r\n                  '1.0-2'}}</div>\r\n              </div>\r\n\r\n            </div>\r\n            <div class=\"button-parent\">\r\n              <ng-container>\r\n                <button class=\"btn mobile-fixed\" (click)=\"!edit ?  proceedToCheckout() : ''\" [appButtonEditor]=\"edit ?? false\"\r\n                  simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                  [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\">{{data?.action?.buttons?.[0]?.content?.label ??\r\n                  'Checkout\r\n                  Cart'}}\r\n                  </button>\r\n                <button class=\"btn\" (click)=\"!edit ? proceedToListPage() : ''\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n                  [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n                  [id]=\"data?.id+getButtonId(1)\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n                  Shopping'}}</button>\r\n              </ng-container>\r\n            </div>\r\n\r\n          </div> -->\r\n          <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n            <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n          </ng-container>\r\n          <!-- <ng-container *ngTemplateOutlet=\"CARTPAGE\"></ng-container> -->\r\n        </ng-container>\r\n        <!-- <ng-container *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && cartType==='TRIAL'\">\r\n          <ng-container *ngTemplateOutlet=\"TRIAL_CART\">\r\n          </ng-container>\r\n        </ng-container> -->\r\n      </div>\r\n      <div class=\"d-flex checkoutPage\"\r\n        *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n        <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n        </ng-container>\r\n      </div>\r\n\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\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  class=\"small-product-img\"\r\n                  [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                  (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n            style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n          {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\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<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n                    (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n  <div class=\"container\">\r\n    <div class=\"main-content\">\r\n      <div class=\"promo-banner\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <div class=\"promo-text\">\r\n          <h3>See It Before You Buy It</h3>\r\n          <p>Experience our designs in detail via video call</p>\r\n        </div>\r\n        <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n          \uD83D\uDCF9 SEE IT LIVE\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"cart-items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sidebar\">\r\n      <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL'\">\r\n        <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n          <div class=\"toogle-switch\">\r\n            <div class=\"form-check form-switch\">\r\n              <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n                [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div class=\"select_matured_text  w-100 text-start cursor-pointer\"\r\n          *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n          Select Matured Scheme\r\n        </div> -->\r\n        <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n          *ngIf=\"selectedRedemption\">\r\n          Selected Scheme\r\n          <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n            scheme-5000/M <span>Change</span></div>\r\n          <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n            <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n      <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n        <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n      </div>\r\n      <div class=\"coupon-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\"\r\n        (click)=\"openDialog(CouponList)\">\r\n        <div class=\"coupon-left\">\r\n          <div class=\"coupon-icon\">%</div>\r\n          <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply Coupon</span>\r\n          <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon Applied</span>\r\n        </div>\r\n        <span *ngIf=\"!responseData.billdetails?.couponId\">\u25B6</span>\r\n        <span *ngIf=\"responseData.billdetails?.couponId\"\r\n          (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n      </div>\r\n\r\n      <div class=\"delivery-section\">\r\n        <div class=\"delivery-header\">\r\n          <mat-icon>gps_fixed</mat-icon>\r\n          <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n          <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n          <span class=\"pincode\">{{pincode}}</span>\r\n          <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"summary-section\">\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Total Price</span>\r\n          <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue\r\n            ?? 0) | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Total Tax</span>\r\n          <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n            number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n          <span class=\"summary-label\">Redeem Amount</span>\r\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\"\r\n          *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <span class=\"summary-label\">Delivery Charge</span>\r\n          <span class=\"summary-value\">\u20B9{{responseData.billdetails.deliveryCharges\r\n            |\r\n            number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount \">\r\n          <span class=\"summary-label\">Discount Amount</span>\r\n          <span class=\"summary-value savings\"> \u20B9{{responseData?.billdetails?.discountAmount\r\n            | number: '1.0-2'}}</span>\r\n        </div>\r\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Coupon Discount</span>\r\n          <span class=\"summary-value apply-coupon\">Apply Coupon</span>\r\n        </div> -->\r\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Shipping (Standard)</span>\r\n          <span class=\"summary-value free\">Free</span>\r\n        </div> -->\r\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"total-label\">Total Cost</span>\r\n          <span class=\"total-value\">\u20B9{{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ??\r\n            0)) - (cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"summary-label\">Free Trial</span>\r\n          <span class=\"summary-value savings\">\u20B90</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"summary-label\">Service Charge</span>\r\n          <span class=\"summary-value savings\">Free</span>\r\n        </div>\r\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"total-label\">Total Cost</span>\r\n          <span class=\"total-value\">\u20B90 </span>\r\n        </div>\r\n      </div>\r\n      <button class=\"place-order-btn\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"cartType === 'SHOPPING'\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n        Shopping'}}</button>\r\n      <button class=\"place-order-btn mt-0\" (click)=\"proceedToCheckout()\" simpoButtonDirective\r\n        *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n        Cart'}}</button>\r\n      <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK APPOINTMENT</button>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n  <div class=\"checkout-left-panel\">\r\n    <div class=\"checkout-main-content\">\r\n      <!-- <div class=\"delivery-options\">\r\n        <div class=\"delivery-option active\">\r\n          <div class=\"delivery-icon\"></div>\r\n          HOME DELIVERY\r\n        </div>\r\n        <div class=\"delivery-option\">\r\n          <div class=\"delivery-icon\"></div>\r\n          STORE PICK-UP\r\n        </div>\r\n      </div> -->\r\n\r\n      <div class=\"section-title\">Shipping Address</div>\r\n\r\n      <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n        <div class=\"address-info\">\r\n          <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n          <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n            {{defaultAddress?.stateName}}</div>\r\n          <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n        <mat-icon>add</mat-icon>\r\n      </div>\r\n\r\n      <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n      <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n        [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"checkout-right-panel\">\r\n    <div class=\"order-summary\">\r\n      <div class=\"summary-title\">Order Summary</div>\r\n\r\n      <div class=\"checkout-product\">\r\n        <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n          <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n            alt=\"\">\r\n          <div class=\"product-details\">\r\n            <div class=\"product-name\">{{item.itemName}}</div>\r\n            <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n            <div class=\"product-price\">\u20B9{{((item.discountedPrice ??\r\n              item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"price-breakdown\">\r\n        <div class=\"price-row\">\r\n          <span>Total Price</span>\r\n          <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n            ?? 0) | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row\">\r\n          <span>Total Tax</span>\r\n          <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n            number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n          <span class=\"summary-label\">Redeem Amount</span>\r\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n\r\n        <div class=\"price-row discount\"\r\n          *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n          <span>Coupon Discount</span>\r\n          <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n            | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <span>Delivery Charge</span>\r\n          <span>{{responseData.billdetails.deliveryCharges\r\n            |\r\n            number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row total\">\r\n          <span>TOTAL AMOUNT</span>\r\n          <span>\u20B9{{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) -\r\n            (cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n  <div class=\"cart-item\" *ngFor=\"let item of products\">\r\n    <div class=\"item-image\">\r\n      <!-- <div class=\"earring-icon\">\uD83E\uDD8B</div> -->\r\n      <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n        (click)=\"goToProductDetails(item)\">\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n        <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice | number:\r\n          '1.0-2'}}</span>\r\n        <span class=\"discount\" *ngIf=\"item.sellingPrice > item.discountedPrice\">Save \u20B9{{item.sellingPrice -\r\n          item.discountedPrice | number: '1.0-2'}}</span>\r\n      </div>\r\n      <div class=\"item-options\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <select name=\"\" id=\"\" (change)=\"changeQuantity($event, item)\" [(ngModel)]=\"item.quantity\">\r\n          <option [value]=\"value\" *ngFor=\"let value of quantity\">{{value}}</option>\r\n        </select>\r\n      </div>\r\n      <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n        <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n          item.itemVariant.properties[varient] | uppercase }}</span>\r\n      </div>\r\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'SHOPPING'\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'TRIAL'\">Available to try from tomorrow</div>\r\n      <div class=\"pickup-info\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 6 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\" (click)=\"removeItem(item)\">\u2715</button>\r\n  </div>\r\n\r\n  <!-- <div class=\"cart-item\">\r\n    <div class=\"item-image\">\r\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B921,163</span>\r\n      </div>\r\n      <div class=\"item-options\">\r\n        <span>Length: 16</span>\r\n        <span>Size: XXL</span>\r\n        <span>Color: Black</span>\r\n      </div>\r\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"pickup-info\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\">\u2715</button>\r\n  </div>\r\n\r\n  <div class=\"cart-item\">\r\n    <div class=\"item-image\">\r\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B921,163</span>\r\n      </div>\r\n      <div class=\"item-options\">\r\n        <span>Length: 16</span>\r\n        <span>Size: XXL</span>\r\n        <span>Color: Black</span>\r\n      </div>\r\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"pickup-info\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\">\u2715</button>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n  <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n    <div class=\"empty-cart-container d-flex flex-column\">\r\n      <div class=\"cart-image\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n          [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n      </div>\r\n      <div class=\"cart-text content-side\">\r\n        <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"d-flex justify-content-center\"\r\n            [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <button class=\"place-order-btn w-25 mx-auto\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n        Shopping'}}</button>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n  <div class=\"modal-body\">\r\n    <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n      [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n      <label for=\"individual\" class=\"scheme-card\">\r\n        <div class=\"scheme-info d-flex gap-1\">\r\n          <div class=\"form-check-radio\">\r\n            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n          </div>\r\n          <div class=\"right-side\">\r\n            <div class=\"scheme-name\">\r\n              <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n              <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n            </div>\r\n            <div class=\"scheme-details\">\r\n              <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n              <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n            </div>\r\n            <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n          </div>\r\n        </div>\r\n      </label>\r\n    </div>\r\n    <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n      Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;background:#f9f9fa;box-shadow:#9999994d 2px 2px 6px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.container{max-width:1200px;margin:0 auto;padding:24px;display:flex;gap:24px}.main-content{background:#fff;border-radius:12px;width:66%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:#9999994d 2px 2px 6px;border-radius:5px}.promo-text h3{color:#000;font-size:.9rem!important;margin-bottom:4px}.promo-text p{color:#000;font-size:1rem;font-size:.9rem!important;margin-bottom:0!important}.see-live-btn{background:#fff;border:1px solid #000;color:#000;padding:8px 16px;border-radius:6px;font-size:12px!important;cursor:pointer;align-items:center;width:max-content!important}.cart-items{padding:20px}.cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:2px solid white;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:24%;height:154px;border-radius:8px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:34%}.coupon-section{border-radius:12px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;background:#8b5cf6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.coupon-text{color:#000;font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:12px;padding:20px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.summary-label{color:#6b7280;font-size:14px;font-weight:700}.summary-value{font-size:14px;color:#111827}.savings{color:#10b981}.apply-coupon{color:#8b5cf6;cursor:pointer}.free{color:#10b981}.total-row{border-top:2px solid white;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px;color:#111827}.total-value{font-weight:700;font-size:18px;color:#111827}.place-order-btn{width:100%;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;width:max-content;border-radius:10px}.cart-tabs div{padding:7px 10px;cursor:pointer}.selected-cart-tab{background:#fff;margin:2px;border-radius:10px;color:#000!important}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;margin:0;height:auto!important}.no-items{height:86vh;overflow:hidden}.checkout-main-content{width:100%}.container{padding:0!important}.cart-items{padding:10px}.item-image{width:86px;height:86px}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ 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\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n      [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n      (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n        [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n        *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n        <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline isActive\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n        <div class=\"cart-tabs\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n            (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n          <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n            ({{trialCartItem?.length ?? 0}})</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container>\r\n          <!-- <div class=\"left-panel\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items box-shadow\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice ?? item.sellingPrice) | number:\r\n                        '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\">\r\n                        <div class=\"d-flex align-items-center\"\r\n                          *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice ??\r\n                      item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\"\r\n                        [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div> -->\r\n          <!-- <div class=\"right-panel\">\r\n            <div class=\"coupons box-shadow\" (click)=\"openDialog(CouponList)\">\r\n              <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n                <div class=\"d-flex flex-column\">\r\n                  <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n                </div>\r\n                <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n                <div class=\"d-flex flex-column\">\r\n                  <span style=\"font-weight: 600;\">Coupon</span>\r\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n                </div>\r\n                <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"price-details box-shadow\">\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\">Total Price</div>\r\n                <div class=\"price-value\"><span [innerHTML]='currency'></span>\r\n                  {{(responseData?.billdetails?.totalNetValue\r\n                  ?? 0) | number: '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\">Total Tax</div>\r\n                <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ?\r\n                  responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n                  number:\r\n                  '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\"\r\n                *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n                <div class=\"price-type\">Delivery Charge</div>\r\n                <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges\r\n                  |\r\n                  number: '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\"\r\n                *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n                <div class=\"price-type\">Discount Amount</div>\r\n                <div class=\"price-value\"><span [innerHtml]='currency'></span>\r\n                  {{responseData?.billdetails?.discountAmount\r\n                  | number: '1.0-2'}}</div>\r\n              </div>\r\n              <hr>\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n                <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span>\r\n                  {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number:\r\n                  '1.0-2'}}</div>\r\n              </div>\r\n\r\n            </div>\r\n            <div class=\"button-parent\">\r\n              <ng-container>\r\n                <button class=\"btn mobile-fixed\" (click)=\"!edit ?  proceedToCheckout() : ''\" [appButtonEditor]=\"edit ?? false\"\r\n                  simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                  [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\">{{data?.action?.buttons?.[0]?.content?.label ??\r\n                  'Checkout\r\n                  Cart'}}\r\n                  </button>\r\n                <button class=\"btn\" (click)=\"!edit ? proceedToListPage() : ''\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n                  [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n                  [id]=\"data?.id+getButtonId(1)\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n                  Shopping'}}</button>\r\n              </ng-container>\r\n            </div>\r\n\r\n          </div> -->\r\n          <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n            <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n          </ng-container>\r\n          <!-- <ng-container *ngTemplateOutlet=\"CARTPAGE\"></ng-container> -->\r\n        </ng-container>\r\n        <!-- <ng-container *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && cartType==='TRIAL'\">\r\n          <ng-container *ngTemplateOutlet=\"TRIAL_CART\">\r\n          </ng-container>\r\n        </ng-container> -->\r\n      </div>\r\n      <div class=\"d-flex checkoutPage\"\r\n        *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n        <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n        </ng-container>\r\n      </div>\r\n\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\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  class=\"small-product-img\"\r\n                  [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                  (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n            style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n          {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\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<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n                    (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n  <div class=\"container\">\r\n    <div class=\"main-content\">\r\n      <div class=\"promo-banner\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <div class=\"promo-text\">\r\n          <h3>See It Before You Buy It</h3>\r\n          <p>Experience our designs in detail via video call</p>\r\n        </div>\r\n        <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n          \uD83D\uDCF9 SEE IT LIVE\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"cart-items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sidebar\">\r\n      <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL'\">\r\n        <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\" *ngIf=\"getUrl()\">Redeem Section Amount\r\n          <div class=\"toogle-switch\">\r\n            <div class=\"form-check form-switch\">\r\n              <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n                [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div class=\"select_matured_text  w-100 text-start cursor-pointer\"\r\n          *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n          Select Matured Scheme\r\n        </div> -->\r\n        <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n          *ngIf=\"selectedRedemption\">\r\n          Selected Scheme\r\n          <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n            scheme-5000/M <span>Change</span></div>\r\n          <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n            <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n      <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n        <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n      </div>\r\n      <div class=\"coupon-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\"\r\n        (click)=\"openDialog(CouponList)\">\r\n        <div class=\"coupon-left\">\r\n          <div class=\"coupon-icon\">%</div>\r\n          <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply Coupon</span>\r\n          <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon Applied</span>\r\n        </div>\r\n        <span *ngIf=\"!responseData.billdetails?.couponId\">\u25B6</span>\r\n        <span *ngIf=\"responseData.billdetails?.couponId\"\r\n          (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n      </div>\r\n\r\n      <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n        <div class=\"delivery-header\">\r\n          <mat-icon>gps_fixed</mat-icon>\r\n          <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n          <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n          <span class=\"pincode\">{{pincode}}</span>\r\n          <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"summary-section\">\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Total Price</span>\r\n          <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue\r\n            ?? 0) | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Total Tax</span>\r\n          <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n            number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n          <span class=\"summary-label\">Redeem Amount</span>\r\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\"\r\n          *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <span class=\"summary-label\">Delivery Charge</span>\r\n          <span class=\"summary-value\">\u20B9{{responseData.billdetails.deliveryCharges\r\n            |\r\n            number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount \">\r\n          <span class=\"summary-label\">Discount Amount</span>\r\n          <span class=\"summary-value savings\"> \u20B9{{responseData?.billdetails?.discountAmount\r\n            | number: '1.0-2'}}</span>\r\n        </div>\r\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Coupon Discount</span>\r\n          <span class=\"summary-value apply-coupon\">Apply Coupon</span>\r\n        </div> -->\r\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Shipping (Standard)</span>\r\n          <span class=\"summary-value free\">Free</span>\r\n        </div> -->\r\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"total-label\">Total Cost</span>\r\n          <span class=\"total-value\">\u20B9{{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ??\r\n            0)) - (cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"summary-label\">Free Trial</span>\r\n          <span class=\"summary-value savings\">\u20B90</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"summary-label\">Service Charge</span>\r\n          <span class=\"summary-value savings\">Free</span>\r\n        </div>\r\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"total-label\">Total Cost</span>\r\n          <span class=\"total-value\">\u20B90 </span>\r\n        </div>\r\n      </div>\r\n      <button class=\"place-order-btn\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"cartType === 'SHOPPING'\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n        Shopping'}}</button>\r\n      <button class=\"place-order-btn mt-0\" (click)=\"proceedToCheckout()\" simpoButtonDirective\r\n        *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n        Cart'}}</button>\r\n      <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK APPOINTMENT</button>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n  <div class=\"checkout-left-panel\">\r\n    <div class=\"checkout-main-content\">\r\n      <!-- <div class=\"delivery-options\">\r\n        <div class=\"delivery-option active\">\r\n          <div class=\"delivery-icon\"></div>\r\n          HOME DELIVERY\r\n        </div>\r\n        <div class=\"delivery-option\">\r\n          <div class=\"delivery-icon\"></div>\r\n          STORE PICK-UP\r\n        </div>\r\n      </div> -->\r\n\r\n      <div class=\"section-title\">Shipping Address</div>\r\n\r\n      <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n        <div class=\"address-info\">\r\n          <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n          <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n            {{defaultAddress?.stateName}}</div>\r\n          <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n        <mat-icon>add</mat-icon>\r\n      </div>\r\n\r\n      <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n      <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n        [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"checkout-right-panel\">\r\n    <div class=\"order-summary\">\r\n      <div class=\"summary-title\">Order Summary</div>\r\n\r\n      <div class=\"checkout-product\">\r\n        <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n          <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n            alt=\"\">\r\n          <div class=\"product-details\">\r\n            <div class=\"product-name\">{{item.itemName}}</div>\r\n            <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n            <div class=\"product-price\">\u20B9{{((item.discountedPrice ??\r\n              item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"price-breakdown\">\r\n        <div class=\"price-row\">\r\n          <span>Total Price</span>\r\n          <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n            ?? 0) | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row\">\r\n          <span>Total Tax</span>\r\n          <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n            number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n          <span class=\"summary-label\">Redeem Amount</span>\r\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n\r\n        <div class=\"price-row discount\"\r\n          *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n          <span>Coupon Discount</span>\r\n          <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n            | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <span>Delivery Charge</span>\r\n          <span>{{responseData.billdetails.deliveryCharges\r\n            |\r\n            number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row total\">\r\n          <span>TOTAL AMOUNT</span>\r\n          <span>\u20B9{{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) -\r\n            (cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n  <div class=\"cart-item\" *ngFor=\"let item of products\">\r\n    <div class=\"item-image\">\r\n      <!-- <div class=\"earring-icon\">\uD83E\uDD8B</div> -->\r\n      <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n        (click)=\"goToProductDetails(item)\">\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n        <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice | number:\r\n          '1.0-2'}}</span>\r\n        <span class=\"discount\" *ngIf=\"item.sellingPrice > item.discountedPrice\">Save \u20B9{{item.sellingPrice -\r\n          item.discountedPrice | number: '1.0-2'}}</span>\r\n      </div>\r\n      <div class=\"item-options\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <select name=\"\" id=\"\" (change)=\"changeQuantity($event, item)\" [(ngModel)]=\"item.quantity\">\r\n          <option [value]=\"value\" *ngFor=\"let value of quantity\">{{value}}</option>\r\n        </select>\r\n      </div>\r\n      <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n        <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n          item.itemVariant.properties[varient] | uppercase }}</span>\r\n      </div>\r\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'SHOPPING'\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'TRIAL'\">Available to try from tomorrow</div>\r\n      <div class=\"pickup-info\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 6 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\" (click)=\"removeItem(item)\">\u2715</button>\r\n  </div>\r\n\r\n  <!-- <div class=\"cart-item\">\r\n    <div class=\"item-image\">\r\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B921,163</span>\r\n      </div>\r\n      <div class=\"item-options\">\r\n        <span>Length: 16</span>\r\n        <span>Size: XXL</span>\r\n        <span>Color: Black</span>\r\n      </div>\r\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"pickup-info\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\">\u2715</button>\r\n  </div>\r\n\r\n  <div class=\"cart-item\">\r\n    <div class=\"item-image\">\r\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B921,163</span>\r\n      </div>\r\n      <div class=\"item-options\">\r\n        <span>Length: 16</span>\r\n        <span>Size: XXL</span>\r\n        <span>Color: Black</span>\r\n      </div>\r\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"pickup-info\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\">\u2715</button>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n  <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n    <div class=\"empty-cart-container d-flex flex-column\">\r\n      <div class=\"cart-image\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n          [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n      </div>\r\n      <div class=\"cart-text content-side\">\r\n        <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"d-flex justify-content-center\"\r\n            [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <button class=\"place-order-btn w-25 mx-auto\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n        Shopping'}}</button>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n  <div class=\"modal-body\">\r\n    <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n      [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n      <label for=\"individual\" class=\"scheme-card\">\r\n        <div class=\"scheme-info d-flex gap-1\">\r\n          <div class=\"form-check-radio\">\r\n            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n          </div>\r\n          <div class=\"right-side\">\r\n            <div class=\"scheme-name\">\r\n              <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n              <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n            </div>\r\n            <div class=\"scheme-details\">\r\n              <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n              <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n            </div>\r\n            <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n          </div>\r\n        </div>\r\n      </label>\r\n    </div>\r\n    <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n      Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;background:#f9f9fa;box-shadow:#9999994d 2px 2px 6px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.container{max-width:1200px;margin:0 auto;padding:24px;display:flex;gap:24px}.main-content{background:#fff;border-radius:12px;width:66%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:#9999994d 2px 2px 6px;border-radius:5px}.promo-text h3{color:#000;font-size:.9rem!important;margin-bottom:4px}.promo-text p{color:#000;font-size:1rem;font-size:.9rem!important;margin-bottom:0!important}.see-live-btn{background:#fff;border:1px solid #000;color:#000;padding:8px 16px;border-radius:6px;font-size:12px!important;cursor:pointer;align-items:center;width:max-content!important}.cart-items{padding:20px}.cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:2px solid white;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:24%;height:154px;border-radius:8px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:34%}.coupon-section{border-radius:12px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;background:#8b5cf6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.coupon-text{color:#000;font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:12px;padding:20px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.summary-label{color:#6b7280;font-size:14px;font-weight:700}.summary-value{font-size:14px;color:#111827}.savings{color:#10b981}.apply-coupon{color:#8b5cf6;cursor:pointer}.free{color:#10b981}.total-row{border-top:2px solid white;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px;color:#111827}.total-value{font-weight:700;font-size:18px;color:#111827}.place-order-btn{width:100%;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;width:max-content;border-radius:10px}.cart-tabs div{padding:7px 10px;cursor:pointer}.selected-cart-tab{background:#fff;margin:2px;border-radius:10px;color:#000!important}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;margin:0;height:auto!important}.no-items{height:86vh;overflow:hidden}.checkout-main-content{width:100%}.container{padding:0!important}.cart-items{padding:10px}.item-image{width:86px;height:86px}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: 
                 //DIRECTIVE
                 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: ToastModule }, { kind: "component", type: i11$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: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }] }); }
 }
@@ -8460,7 +8467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AddressListComponent,
                         MatIconModule,
                         ButtonEditorDirective
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n      [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n      (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n        [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n        *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n        <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline isActive\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG'\">\r\n        <div class=\"cart-tabs\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n            (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n          <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n            ({{trialCartItem?.length ?? 0}})</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container>\r\n          <!-- <div class=\"left-panel\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items box-shadow\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice ?? item.sellingPrice) | number:\r\n                        '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\">\r\n                        <div class=\"d-flex align-items-center\"\r\n                          *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice ??\r\n                      item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\"\r\n                        [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div> -->\r\n          <!-- <div class=\"right-panel\">\r\n            <div class=\"coupons box-shadow\" (click)=\"openDialog(CouponList)\">\r\n              <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n                <div class=\"d-flex flex-column\">\r\n                  <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n                </div>\r\n                <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n                <div class=\"d-flex flex-column\">\r\n                  <span style=\"font-weight: 600;\">Coupon</span>\r\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n                </div>\r\n                <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"price-details box-shadow\">\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\">Total Price</div>\r\n                <div class=\"price-value\"><span [innerHTML]='currency'></span>\r\n                  {{(responseData?.billdetails?.totalNetValue\r\n                  ?? 0) | number: '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\">Total Tax</div>\r\n                <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ?\r\n                  responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n                  number:\r\n                  '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\"\r\n                *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n                <div class=\"price-type\">Delivery Charge</div>\r\n                <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges\r\n                  |\r\n                  number: '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\"\r\n                *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n                <div class=\"price-type\">Discount Amount</div>\r\n                <div class=\"price-value\"><span [innerHtml]='currency'></span>\r\n                  {{responseData?.billdetails?.discountAmount\r\n                  | number: '1.0-2'}}</div>\r\n              </div>\r\n              <hr>\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n                <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span>\r\n                  {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number:\r\n                  '1.0-2'}}</div>\r\n              </div>\r\n\r\n            </div>\r\n            <div class=\"button-parent\">\r\n              <ng-container>\r\n                <button class=\"btn mobile-fixed\" (click)=\"!edit ?  proceedToCheckout() : ''\" [appButtonEditor]=\"edit ?? false\"\r\n                  simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                  [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\">{{data?.action?.buttons?.[0]?.content?.label ??\r\n                  'Checkout\r\n                  Cart'}}\r\n                  </button>\r\n                <button class=\"btn\" (click)=\"!edit ? proceedToListPage() : ''\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n                  [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n                  [id]=\"data?.id+getButtonId(1)\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n                  Shopping'}}</button>\r\n              </ng-container>\r\n            </div>\r\n\r\n          </div> -->\r\n          <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n            <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n          </ng-container>\r\n          <!-- <ng-container *ngTemplateOutlet=\"CARTPAGE\"></ng-container> -->\r\n        </ng-container>\r\n        <!-- <ng-container *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && cartType==='TRIAL'\">\r\n          <ng-container *ngTemplateOutlet=\"TRIAL_CART\">\r\n          </ng-container>\r\n        </ng-container> -->\r\n      </div>\r\n      <div class=\"d-flex checkoutPage\"\r\n        *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n        <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n        </ng-container>\r\n      </div>\r\n\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\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  class=\"small-product-img\"\r\n                  [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                  (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n            style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n          {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\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<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n                    (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n  <div class=\"container\">\r\n    <div class=\"main-content\">\r\n      <div class=\"promo-banner\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <div class=\"promo-text\">\r\n          <h3>See It Before You Buy It</h3>\r\n          <p>Experience our designs in detail via video call</p>\r\n        </div>\r\n        <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n          \uD83D\uDCF9 SEE IT LIVE\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"cart-items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sidebar\">\r\n      <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL'\">\r\n        <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n          <div class=\"toogle-switch\">\r\n            <div class=\"form-check form-switch\">\r\n              <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n                [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div class=\"select_matured_text  w-100 text-start cursor-pointer\"\r\n          *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n          Select Matured Scheme\r\n        </div> -->\r\n        <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n          *ngIf=\"selectedRedemption\">\r\n          Selected Scheme\r\n          <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n            scheme-5000/M <span>Change</span></div>\r\n          <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n            <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n      <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n        <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n      </div>\r\n      <div class=\"coupon-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\"\r\n        (click)=\"openDialog(CouponList)\">\r\n        <div class=\"coupon-left\">\r\n          <div class=\"coupon-icon\">%</div>\r\n          <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply Coupon</span>\r\n          <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon Applied</span>\r\n        </div>\r\n        <span *ngIf=\"!responseData.billdetails?.couponId\">\u25B6</span>\r\n        <span *ngIf=\"responseData.billdetails?.couponId\"\r\n          (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n      </div>\r\n\r\n      <div class=\"delivery-section\">\r\n        <div class=\"delivery-header\">\r\n          <mat-icon>gps_fixed</mat-icon>\r\n          <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n          <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n          <span class=\"pincode\">{{pincode}}</span>\r\n          <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"summary-section\">\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Total Price</span>\r\n          <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue\r\n            ?? 0) | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Total Tax</span>\r\n          <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n            number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n          <span class=\"summary-label\">Redeem Amount</span>\r\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\"\r\n          *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <span class=\"summary-label\">Delivery Charge</span>\r\n          <span class=\"summary-value\">\u20B9{{responseData.billdetails.deliveryCharges\r\n            |\r\n            number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount \">\r\n          <span class=\"summary-label\">Discount Amount</span>\r\n          <span class=\"summary-value savings\"> \u20B9{{responseData?.billdetails?.discountAmount\r\n            | number: '1.0-2'}}</span>\r\n        </div>\r\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Coupon Discount</span>\r\n          <span class=\"summary-value apply-coupon\">Apply Coupon</span>\r\n        </div> -->\r\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Shipping (Standard)</span>\r\n          <span class=\"summary-value free\">Free</span>\r\n        </div> -->\r\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"total-label\">Total Cost</span>\r\n          <span class=\"total-value\">\u20B9{{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ??\r\n            0)) - (cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"summary-label\">Free Trial</span>\r\n          <span class=\"summary-value savings\">\u20B90</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"summary-label\">Service Charge</span>\r\n          <span class=\"summary-value savings\">Free</span>\r\n        </div>\r\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"total-label\">Total Cost</span>\r\n          <span class=\"total-value\">\u20B90 </span>\r\n        </div>\r\n      </div>\r\n      <button class=\"place-order-btn\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"cartType === 'SHOPPING'\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n        Shopping'}}</button>\r\n      <button class=\"place-order-btn mt-0\" (click)=\"proceedToCheckout()\" simpoButtonDirective\r\n        *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n        Cart'}}</button>\r\n      <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK APPOINTMENT</button>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n  <div class=\"checkout-left-panel\">\r\n    <div class=\"checkout-main-content\">\r\n      <!-- <div class=\"delivery-options\">\r\n        <div class=\"delivery-option active\">\r\n          <div class=\"delivery-icon\"></div>\r\n          HOME DELIVERY\r\n        </div>\r\n        <div class=\"delivery-option\">\r\n          <div class=\"delivery-icon\"></div>\r\n          STORE PICK-UP\r\n        </div>\r\n      </div> -->\r\n\r\n      <div class=\"section-title\">Shipping Address</div>\r\n\r\n      <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n        <div class=\"address-info\">\r\n          <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n          <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n            {{defaultAddress?.stateName}}</div>\r\n          <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n        <mat-icon>add</mat-icon>\r\n      </div>\r\n\r\n      <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n      <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n        [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"checkout-right-panel\">\r\n    <div class=\"order-summary\">\r\n      <div class=\"summary-title\">Order Summary</div>\r\n\r\n      <div class=\"checkout-product\">\r\n        <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n          <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n            alt=\"\">\r\n          <div class=\"product-details\">\r\n            <div class=\"product-name\">{{item.itemName}}</div>\r\n            <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n            <div class=\"product-price\">\u20B9{{((item.discountedPrice ??\r\n              item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"price-breakdown\">\r\n        <div class=\"price-row\">\r\n          <span>Total Price</span>\r\n          <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n            ?? 0) | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row\">\r\n          <span>Total Tax</span>\r\n          <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n            number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n          <span class=\"summary-label\">Redeem Amount</span>\r\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n\r\n        <div class=\"price-row discount\"\r\n          *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n          <span>Coupon Discount</span>\r\n          <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n            | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <span>Delivery Charge</span>\r\n          <span>{{responseData.billdetails.deliveryCharges\r\n            |\r\n            number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row total\">\r\n          <span>TOTAL AMOUNT</span>\r\n          <span>\u20B9{{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) -\r\n            (cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n  <div class=\"cart-item\" *ngFor=\"let item of products\">\r\n    <div class=\"item-image\">\r\n      <!-- <div class=\"earring-icon\">\uD83E\uDD8B</div> -->\r\n      <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n        (click)=\"goToProductDetails(item)\">\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n        <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice | number:\r\n          '1.0-2'}}</span>\r\n        <span class=\"discount\" *ngIf=\"item.sellingPrice > item.discountedPrice\">Save \u20B9{{item.sellingPrice -\r\n          item.discountedPrice | number: '1.0-2'}}</span>\r\n      </div>\r\n      <div class=\"item-options\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <select name=\"\" id=\"\" (change)=\"changeQuantity($event, item)\" [(ngModel)]=\"item.quantity\">\r\n          <option [value]=\"value\" *ngFor=\"let value of quantity\">{{value}}</option>\r\n        </select>\r\n      </div>\r\n      <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n        <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n          item.itemVariant.properties[varient] | uppercase }}</span>\r\n      </div>\r\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'SHOPPING'\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'TRIAL'\">Available to try from tomorrow</div>\r\n      <div class=\"pickup-info\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 6 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\" (click)=\"removeItem(item)\">\u2715</button>\r\n  </div>\r\n\r\n  <!-- <div class=\"cart-item\">\r\n    <div class=\"item-image\">\r\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B921,163</span>\r\n      </div>\r\n      <div class=\"item-options\">\r\n        <span>Length: 16</span>\r\n        <span>Size: XXL</span>\r\n        <span>Color: Black</span>\r\n      </div>\r\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"pickup-info\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\">\u2715</button>\r\n  </div>\r\n\r\n  <div class=\"cart-item\">\r\n    <div class=\"item-image\">\r\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B921,163</span>\r\n      </div>\r\n      <div class=\"item-options\">\r\n        <span>Length: 16</span>\r\n        <span>Size: XXL</span>\r\n        <span>Color: Black</span>\r\n      </div>\r\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"pickup-info\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\">\u2715</button>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n  <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n    <div class=\"empty-cart-container d-flex flex-column\">\r\n      <div class=\"cart-image\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n          [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n      </div>\r\n      <div class=\"cart-text content-side\">\r\n        <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"d-flex justify-content-center\"\r\n            [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <button class=\"place-order-btn w-25 mx-auto\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n        Shopping'}}</button>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n  <div class=\"modal-body\">\r\n    <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n      [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n      <label for=\"individual\" class=\"scheme-card\">\r\n        <div class=\"scheme-info d-flex gap-1\">\r\n          <div class=\"form-check-radio\">\r\n            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n          </div>\r\n          <div class=\"right-side\">\r\n            <div class=\"scheme-name\">\r\n              <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n              <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n            </div>\r\n            <div class=\"scheme-details\">\r\n              <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n              <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n            </div>\r\n            <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n          </div>\r\n        </div>\r\n      </label>\r\n    </div>\r\n    <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n      Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;background:#f9f9fa;box-shadow:#9999994d 2px 2px 6px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.container{max-width:1200px;margin:0 auto;padding:24px;display:flex;gap:24px}.main-content{background:#fff;border-radius:12px;width:66%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:#9999994d 2px 2px 6px;border-radius:5px}.promo-text h3{color:#000;font-size:.9rem!important;margin-bottom:4px}.promo-text p{color:#000;font-size:1rem;font-size:.9rem!important;margin-bottom:0!important}.see-live-btn{background:#fff;border:1px solid #000;color:#000;padding:8px 16px;border-radius:6px;font-size:12px!important;cursor:pointer;align-items:center;width:max-content!important}.cart-items{padding:20px}.cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:2px solid white;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:24%;height:154px;border-radius:8px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:34%}.coupon-section{border-radius:12px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;background:#8b5cf6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.coupon-text{color:#000;font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:12px;padding:20px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.summary-label{color:#6b7280;font-size:14px;font-weight:700}.summary-value{font-size:14px;color:#111827}.savings{color:#10b981}.apply-coupon{color:#8b5cf6;cursor:pointer}.free{color:#10b981}.total-row{border-top:2px solid white;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px;color:#111827}.total-value{font-weight:700;font-size:18px;color:#111827}.place-order-btn{width:100%;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;width:max-content;border-radius:10px}.cart-tabs div{padding:7px 10px;cursor:pointer}.selected-cart-tab{background:#fff;margin:2px;border-radius:10px;color:#000!important}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;margin:0;height:auto!important}.no-items{height:86vh;overflow:hidden}.checkout-main-content{width:100%}.container{padding:0!important}.cart-items{padding:10px}.item-image{width:86px;height:86px}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n      [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n      (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n        [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n        *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n        <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline isActive\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n        <div class=\"cart-tabs\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n            (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n          <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n            ({{trialCartItem?.length ?? 0}})</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container>\r\n          <!-- <div class=\"left-panel\">\r\n            <div class=\"my-bag\">\r\n              My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n            </div>\r\n            <div class=\"cart-items box-shadow\">\r\n              <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n                <div class=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                      alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice ?? item.sellingPrice) | number:\r\n                        '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\">\r\n                        <div class=\"d-flex align-items-center\"\r\n                          *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\r\n                      <div class=\"item-quantity\">\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                        <span>{{item.quantity}}</span>\r\n                        <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice ??\r\n                      item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\"\r\n                        [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n              </ng-container>\r\n            </div>\r\n          </div> -->\r\n          <!-- <div class=\"right-panel\">\r\n            <div class=\"coupons box-shadow\" (click)=\"openDialog(CouponList)\">\r\n              <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n                <div class=\"d-flex flex-column\">\r\n                  <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n                </div>\r\n                <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n                <div class=\"d-flex flex-column\">\r\n                  <span style=\"font-weight: 600;\">Coupon</span>\r\n                  <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n                </div>\r\n                <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"price-details box-shadow\">\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\">Total Price</div>\r\n                <div class=\"price-value\"><span [innerHTML]='currency'></span>\r\n                  {{(responseData?.billdetails?.totalNetValue\r\n                  ?? 0) | number: '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\">Total Tax</div>\r\n                <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ?\r\n                  responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n                  number:\r\n                  '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\"\r\n                *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n                <div class=\"price-type\">Delivery Charge</div>\r\n                <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges\r\n                  |\r\n                  number: '1.0-2'}}</div>\r\n              </div>\r\n              <div class=\"price-parent-block\"\r\n                *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n                <div class=\"price-type\">Discount Amount</div>\r\n                <div class=\"price-value\"><span [innerHtml]='currency'></span>\r\n                  {{responseData?.billdetails?.discountAmount\r\n                  | number: '1.0-2'}}</div>\r\n              </div>\r\n              <hr>\r\n              <div class=\"price-parent-block\">\r\n                <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n                <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span>\r\n                  {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number:\r\n                  '1.0-2'}}</div>\r\n              </div>\r\n\r\n            </div>\r\n            <div class=\"button-parent\">\r\n              <ng-container>\r\n                <button class=\"btn mobile-fixed\" (click)=\"!edit ?  proceedToCheckout() : ''\" [appButtonEditor]=\"edit ?? false\"\r\n                  simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                  [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\">{{data?.action?.buttons?.[0]?.content?.label ??\r\n                  'Checkout\r\n                  Cart'}}\r\n                  </button>\r\n                <button class=\"btn\" (click)=\"!edit ? proceedToListPage() : ''\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n                  [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n                  [id]=\"data?.id+getButtonId(1)\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n                  Shopping'}}</button>\r\n              </ng-container>\r\n            </div>\r\n\r\n          </div> -->\r\n          <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n            <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n          </ng-container>\r\n          <!-- <ng-container *ngTemplateOutlet=\"CARTPAGE\"></ng-container> -->\r\n        </ng-container>\r\n        <!-- <ng-container *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && cartType==='TRIAL'\">\r\n          <ng-container *ngTemplateOutlet=\"TRIAL_CART\">\r\n          </ng-container>\r\n        </ng-container> -->\r\n      </div>\r\n      <div class=\"d-flex checkoutPage\"\r\n        *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n        <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n        </ng-container>\r\n      </div>\r\n\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\r\n    </section>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  class=\"small-product-img\"\r\n                  [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n                  (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-item-quantity\">\r\n                <span class=\"cursor\">-</span>\r\n                <span>{{item.quantity}}</span>\r\n                <span class=\"cursor\">+</span>\r\n              </div>\r\n              <div class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n            style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n          {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\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<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n                    [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n                    (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n  <div class=\"container\">\r\n    <div class=\"main-content\">\r\n      <div class=\"promo-banner\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <div class=\"promo-text\">\r\n          <h3>See It Before You Buy It</h3>\r\n          <p>Experience our designs in detail via video call</p>\r\n        </div>\r\n        <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n          \uD83D\uDCF9 SEE IT LIVE\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"cart-items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"sidebar\">\r\n      <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL'\">\r\n        <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\" *ngIf=\"getUrl()\">Redeem Section Amount\r\n          <div class=\"toogle-switch\">\r\n            <div class=\"form-check form-switch\">\r\n              <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n                [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div class=\"select_matured_text  w-100 text-start cursor-pointer\"\r\n          *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n          Select Matured Scheme\r\n        </div> -->\r\n        <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n          *ngIf=\"selectedRedemption\">\r\n          Selected Scheme\r\n          <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n            scheme-5000/M <span>Change</span></div>\r\n          <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n            <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n      <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n        <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n      </div>\r\n      <div class=\"coupon-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\"\r\n        (click)=\"openDialog(CouponList)\">\r\n        <div class=\"coupon-left\">\r\n          <div class=\"coupon-icon\">%</div>\r\n          <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply Coupon</span>\r\n          <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon Applied</span>\r\n        </div>\r\n        <span *ngIf=\"!responseData.billdetails?.couponId\">\u25B6</span>\r\n        <span *ngIf=\"responseData.billdetails?.couponId\"\r\n          (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n      </div>\r\n\r\n      <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n        <div class=\"delivery-header\">\r\n          <mat-icon>gps_fixed</mat-icon>\r\n          <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n          <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n          <span class=\"pincode\">{{pincode}}</span>\r\n          <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"summary-section\">\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Total Price</span>\r\n          <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue\r\n            ?? 0) | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Total Tax</span>\r\n          <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n            number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n          <span class=\"summary-label\">Redeem Amount</span>\r\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\"\r\n          *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <span class=\"summary-label\">Delivery Charge</span>\r\n          <span class=\"summary-value\">\u20B9{{responseData.billdetails.deliveryCharges\r\n            |\r\n            number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount \">\r\n          <span class=\"summary-label\">Discount Amount</span>\r\n          <span class=\"summary-value savings\"> \u20B9{{responseData?.billdetails?.discountAmount\r\n            | number: '1.0-2'}}</span>\r\n        </div>\r\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Coupon Discount</span>\r\n          <span class=\"summary-value apply-coupon\">Apply Coupon</span>\r\n        </div> -->\r\n        <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"summary-label\">Shipping (Standard)</span>\r\n          <span class=\"summary-value free\">Free</span>\r\n        </div> -->\r\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n          <span class=\"total-label\">Total Cost</span>\r\n          <span class=\"total-value\">\u20B9{{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ??\r\n            0)) - (cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"summary-label\">Free Trial</span>\r\n          <span class=\"summary-value savings\">\u20B90</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"summary-label\">Service Charge</span>\r\n          <span class=\"summary-value savings\">Free</span>\r\n        </div>\r\n        <div class=\"summary-row total-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n          <span class=\"total-label\">Total Cost</span>\r\n          <span class=\"total-value\">\u20B90 </span>\r\n        </div>\r\n      </div>\r\n      <button class=\"place-order-btn\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"cartType === 'SHOPPING'\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n        Shopping'}}</button>\r\n      <button class=\"place-order-btn mt-0\" (click)=\"proceedToCheckout()\" simpoButtonDirective\r\n        *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n        Cart'}}</button>\r\n      <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n        [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK APPOINTMENT</button>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n  <div class=\"checkout-left-panel\">\r\n    <div class=\"checkout-main-content\">\r\n      <!-- <div class=\"delivery-options\">\r\n        <div class=\"delivery-option active\">\r\n          <div class=\"delivery-icon\"></div>\r\n          HOME DELIVERY\r\n        </div>\r\n        <div class=\"delivery-option\">\r\n          <div class=\"delivery-icon\"></div>\r\n          STORE PICK-UP\r\n        </div>\r\n      </div> -->\r\n\r\n      <div class=\"section-title\">Shipping Address</div>\r\n\r\n      <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n        <div class=\"address-info\">\r\n          <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n          <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n            {{defaultAddress?.stateName}}</div>\r\n          <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n        <mat-icon>add</mat-icon>\r\n      </div>\r\n\r\n      <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n      <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n        [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"checkout-right-panel\">\r\n    <div class=\"order-summary\">\r\n      <div class=\"summary-title\">Order Summary</div>\r\n\r\n      <div class=\"checkout-product\">\r\n        <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n          <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n            alt=\"\">\r\n          <div class=\"product-details\">\r\n            <div class=\"product-name\">{{item.itemName}}</div>\r\n            <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n            <div class=\"product-price\">\u20B9{{((item.discountedPrice ??\r\n              item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"price-breakdown\">\r\n        <div class=\"price-row\">\r\n          <span>Total Price</span>\r\n          <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n            ?? 0) | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row\">\r\n          <span>Total Tax</span>\r\n          <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n            responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n            number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n          <span class=\"summary-label\">Redeem Amount</span>\r\n          <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n\r\n        <div class=\"price-row discount\"\r\n          *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n          <span>Coupon Discount</span>\r\n          <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n            | number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <span>Delivery Charge</span>\r\n          <span>{{responseData.billdetails.deliveryCharges\r\n            |\r\n            number: '1.0-2'}}</span>\r\n        </div>\r\n        <div class=\"price-row total\">\r\n          <span>TOTAL AMOUNT</span>\r\n          <span>\u20B9{{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) -\r\n            (cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n            '1.0-2'}}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n  <div class=\"cart-item\" *ngFor=\"let item of products\">\r\n    <div class=\"item-image\">\r\n      <!-- <div class=\"earring-icon\">\uD83E\uDD8B</div> -->\r\n      <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n        (click)=\"goToProductDetails(item)\">\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n        <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice | number:\r\n          '1.0-2'}}</span>\r\n        <span class=\"discount\" *ngIf=\"item.sellingPrice > item.discountedPrice\">Save \u20B9{{item.sellingPrice -\r\n          item.discountedPrice | number: '1.0-2'}}</span>\r\n      </div>\r\n      <div class=\"item-options\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <select name=\"\" id=\"\" (change)=\"changeQuantity($event, item)\" [(ngModel)]=\"item.quantity\">\r\n          <option [value]=\"value\" *ngFor=\"let value of quantity\">{{value}}</option>\r\n        </select>\r\n      </div>\r\n      <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n        <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n          item.itemVariant.properties[varient] | uppercase }}</span>\r\n      </div>\r\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'SHOPPING'\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"delivery-info\" *ngIf=\"cartType === 'TRIAL'\">Available to try from tomorrow</div>\r\n      <div class=\"pickup-info\" *ngIf=\"cartType === 'SHOPPING'\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 6 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\" (click)=\"removeItem(item)\">\u2715</button>\r\n  </div>\r\n\r\n  <!-- <div class=\"cart-item\">\r\n    <div class=\"item-image\">\r\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B921,163</span>\r\n      </div>\r\n      <div class=\"item-options\">\r\n        <span>Length: 16</span>\r\n        <span>Size: XXL</span>\r\n        <span>Color: Black</span>\r\n      </div>\r\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"pickup-info\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\">\u2715</button>\r\n  </div>\r\n\r\n  <div class=\"cart-item\">\r\n    <div class=\"item-image\">\r\n      <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n    </div>\r\n    <div class=\"item-details\">\r\n      <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n      <div class=\"item-price\">\r\n        <span class=\"current-price\">\u20B921,163</span>\r\n      </div>\r\n      <div class=\"item-options\">\r\n        <span>Length: 16</span>\r\n        <span>Size: XXL</span>\r\n        <span>Color: Black</span>\r\n      </div>\r\n      <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n      <div class=\"pickup-info\">\r\n        <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n        <span>\u25B6</span>\r\n      </div>\r\n    </div>\r\n    <button class=\"remove-btn\">\u2715</button>\r\n  </div> -->\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n  <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n    <div class=\"empty-cart-container d-flex flex-column\">\r\n      <div class=\"cart-image\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n          [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n          [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n      </div>\r\n      <div class=\"cart-text content-side\">\r\n        <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"d-flex justify-content-center\"\r\n            [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <button class=\"place-order-btn w-25 mx-auto\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n        [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n        Shopping'}}</button>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n  <div class=\"modal-body\">\r\n    <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n      [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\r\n      <label for=\"individual\" class=\"scheme-card\">\r\n        <div class=\"scheme-info d-flex gap-1\">\r\n          <div class=\"form-check-radio\">\r\n            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\r\n          </div>\r\n          <div class=\"right-side\">\r\n            <div class=\"scheme-name\">\r\n              <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n              <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n            </div>\r\n            <div class=\"scheme-details\">\r\n              <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n              <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n            </div>\r\n            <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n          </div>\r\n        </div>\r\n      </label>\r\n    </div>\r\n    <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n      Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;background:#f9f9fa;box-shadow:#9999994d 2px 2px 6px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.container{max-width:1200px;margin:0 auto;padding:24px;display:flex;gap:24px}.main-content{background:#fff;border-radius:12px;width:66%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:#9999994d 2px 2px 6px;border-radius:5px}.promo-text h3{color:#000;font-size:.9rem!important;margin-bottom:4px}.promo-text p{color:#000;font-size:1rem;font-size:.9rem!important;margin-bottom:0!important}.see-live-btn{background:#fff;border:1px solid #000;color:#000;padding:8px 16px;border-radius:6px;font-size:12px!important;cursor:pointer;align-items:center;width:max-content!important}.cart-items{padding:20px}.cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:2px solid white;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:24%;height:154px;border-radius:8px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:34%}.coupon-section{border-radius:12px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;background:#8b5cf6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.coupon-text{color:#000;font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:12px;padding:20px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.summary-label{color:#6b7280;font-size:14px;font-weight:700}.summary-value{font-size:14px;color:#111827}.savings{color:#10b981}.apply-coupon{color:#8b5cf6;cursor:pointer}.free{color:#10b981}.total-row{border-top:2px solid white;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px;color:#111827}.total-value{font-weight:700;font-size:18px;color:#111827}.place-order-btn{width:100%;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;width:max-content;border-radius:10px}.cart-tabs div{padding:7px 10px;cursor:pointer}.selected-cart-tab{background:#fff;margin:2px;border-radius:10px;color:#000!important}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;margin:0;height:auto!important}.no-items{height:86vh;overflow:hidden}.checkout-main-content{width:100%}.container{padding:0!important}.cart-items{padding:10px}.item-image{width:86px;height:86px}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i4$1.MessageService }, { type: i8$2.MatBottomSheet }, { type: i2$2.ActivatedRoute }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -15288,6 +15295,7 @@ class ProductDescComponent extends BaseSection {
         this.items = null;
         this.trialCartItem = [];
         this.isPinCode = true;
+        this.toShowInJewellery = false;
         this.varientLoading = false;
         this.recentViewItemList = [];
         this.reviewTitle = "";
@@ -15338,6 +15346,9 @@ class ProductDescComponent extends BaseSection {
         //   this.businessDetails = JSON.parse(this.businessDetails);
         //   this.subIndustryName = this.businessDetails.subIndustryName;
         // }
+        if (window?.location?.origin?.includes('caratlane') || window?.location?.origin?.includes('orra')) {
+            this.toShowInJewellery = true;
+        }
         this.getEcommerceConfigs();
         this.subIndustryName = localStorage.getItem('subIndustryName') ?? "";
         this.featureProductData = new FeaturedProductModal(this.data);
@@ -16037,7 +16048,7 @@ class ProductDescComponent extends BaseSection {
         document.getElementById('openReviewDetail')?.click();
     }
     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: i4$1.MessageService }, { token: i1$2.Meta }, { token: i1$2.Title }, { token: i8$2.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  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [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 p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\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>\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\" 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 class=\"favourite border-solid\" [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?.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\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | 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  <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\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\" (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>\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 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;margin-bottom:1rem}.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: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i4$2.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: i11$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"] }] }); }
+    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  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [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 p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\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\" 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 class=\"favourite border-solid\" [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?.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\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | 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\" (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>\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;margin-bottom:1rem}.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: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i4$2.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: i11$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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -16066,7 +16077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SvgDividerComponent,
                         CornerDirective,
                         ButtonEditorDirective,
-                    ], 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  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [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 p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\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>\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\" 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 class=\"favourite border-solid\" [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?.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\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | 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  <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\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\" (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>\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 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;margin-bottom:1rem}.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  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [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 p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\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\" 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 class=\"favourite border-solid\" [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?.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\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n        <span [innerHTML]='currency'></span>\r\n        {{responseData?.price?.sellingPrice | 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\" (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>\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;margin-bottom:1rem}.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]
@@ -17725,8 +17736,8 @@ class UserProfileComponent extends BaseSection {
             { value: "Orders", icon: "accessibility", status: true, label: "Heading", url: 'order', image: "ORDER" },
             { value: "Address", icon: "location_on", status: false, label: "Heading", url: 'address', image: "LOCATION" },
             { value: "Wishlist", icon: "location_on", status: false, label: "Heading", url: 'address', image: "WISHLIST" },
-            { value: "Scheme Passbook", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" },
-            { value: "Try At Home", icon: "location_on", status: false, label: "Heading", url: 'address', image: "TRY_AT_HOME" },
+            // { value: "Scheme Passbook", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" },
+            // { value: "Try At Home", icon: "location_on", status: false, label: "Heading", url: 'address', image: "TRY_AT_HOME" },
             // { value: "Scheme Details" , icon : "https://d2z9497xp8xb12.cloudfront.net/prod-images/172691c1752568081135bonus.png" ,  status : false , label: "Heading", url: 'https://d2z9497xp8xb12.cloudfront.net/prod-images/172691c1752568081135bonus.png', image: "https://d2z9497xp8xb12.cloudfront.net/prod-images/172691c1752568081135bonus.png" }
             // { value: "Account Details", icon: "supervised_user_circle", status: false, label: "Heading", url: 'account' },
             // { value: "Logout", icon: "transit_enterexit", status: false, label: "Heading", url: '' }
@@ -17745,7 +17756,10 @@ class UserProfileComponent extends BaseSection {
         });
     }
     ngOnInit() {
-        this.getAllSchemes();
+        if (window?.location?.origin?.includes('caratlane') || window?.location?.origin?.includes('orra')) {
+            this.sidePanelList.push({ value: "Scheme Passbook", icon: "location_on", status: false, label: "Heading", url: 'address', image: "PASSBOOK" });
+            this.getAllSchemes();
+        }
         this.getScreenSize();
         this._eventService.showLoadingScreen.subscribe((response) => {
             this.isLoading = response;
@@ -17759,6 +17773,15 @@ class UserProfileComponent extends BaseSection {
         this.content = this.data?.content;
         this.getUserOrderDetails();
         this.getUserWislistDetails();
+        this.getEcommerceConfigs();
+    }
+    getEcommerceConfigs() {
+        this.restService.getEcommerceConfigs().subscribe((res) => {
+            this.ecomConfigs = res?.data;
+            if (this.ecomConfigs?.appointmentBookingEnabled) {
+                this.sidePanelList.push({ value: "Try At Home", icon: "location_on", status: false, label: "Heading", url: 'address', image: "TRY_AT_HOME" });
+            }
+        });
     }
     getUserOrderDetails() {
         const payload = {
@@ -20081,7 +20104,7 @@ class BookAppointmentComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i2$2.Router }, { token: i4$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"container\">\r\n    <div class=\"content-grid\">\r\n      <!-- Left Form Section -->\r\n      <div class=\"form-section\">\r\n        <!-- Service Description -->\r\n        <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <h2 class=\"section-title\">Try at Home Service</h2>\r\n          <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\r\n        </div>\r\n\r\n        <!-- Pincode Section -->\r\n        <!-- <div class=\"card\">\r\n          <h3 class=\"section-title\">\r\n            <svg class=\"icon\" viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\r\n            </svg>\r\n            Service Location\r\n          </h3>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Enter your pincode</label>\r\n            <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\r\n              maxlength=\"6\" />\r\n            <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\r\n              \u2713 Service available in your area\r\n            </div>\r\n          </div>\r\n        </div> -->\r\n\r\n        <!-- Date Selection -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Select a Date</h3>\r\n          <div class=\"date-grid\">\r\n            <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\r\n              [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\r\n              <div class=\"time\">\r\n                <div class=\"day\">{{day.day.substring(0,3)}}</div>\r\n                <div class=\"date\">{{day.date}}</div>\r\n              </div>\r\n              <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\r\n                Designs</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Time Selection -->\r\n        <div class=\"card\">\r\n          <div class=\"section\">\r\n            <h2 class=\"section-title\">Select a Time</h2>\r\n            <div class=\"time-grid\">\r\n              <div class=\"time-slot\" *ngFor=\"let time of timeSlots\" (click)=\"selectTime(time)\"\r\n                [ngClass]=\"{'selected': time === customerDetails.time}\">\r\n                <div class=\"more-slot-badge\">More Slot Left</div>\r\n                <div class=\"time-text\">{{time}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Customer Details -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Contact Details</h3>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Full Name *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Phone Number *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\r\n                placeholder=\"Enter your phone number\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Email *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">City *</label>\r\n              <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\r\n                placeholder=\"Enter your city\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">State *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Pincode *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\r\n                placeholder=\"Enter your phone number\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Complete Address *</label>\r\n            <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\r\n              placeholder=\"Enter your complete address\"></textarea>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Sidebar -->\r\n      <div class=\"sidebar\">\r\n        <div class=\"card\">\r\n          <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\r\n          <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\r\n\r\n          <div class=\"design-parent\">\r\n            <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\r\n              <div class=\"design-content\">\r\n                <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  alt=\"\">\r\n                <!-- <div class=\"\">Design Image</div> -->\r\n\r\n                <div class=\"design-info\">\r\n                  <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n                  <div class=\"item-price\">\r\n                    <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n                    <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\r\n                      number:\r\n                      '1.0-2'}}</span>\r\n                  </div>\r\n                  <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n                    <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n                      item.itemVariant.properties[varient] | uppercase }}</span>\r\n                  </div>\r\n                </div>\r\n                <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\r\n                {{ design.selected ? 'Selected' : 'Select' }}\r\n              </button> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"add-design\" (click)=\"addMoreDesign()\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n            </svg>\r\n            Add More Designs\r\n          </button>\r\n\r\n          <div class=\"summary\">\r\n            <!-- <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Selected Designs:</span>\r\n              <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\r\n            </div> -->\r\n            <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Service:</span>\r\n              <span class=\"summary-value free-service\">FREE</span>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\r\n            [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n            {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\r\n          </button>\r\n          <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\r\n            [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\r\n          <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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</main>\r\n", styles: ["*{font-family:var(--primary-font-family)!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\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: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$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: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"container\">\r\n    <div class=\"content-grid\">\r\n      <!-- Left Form Section -->\r\n      <div class=\"form-section\">\r\n        <!-- Service Description -->\r\n        <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <h2 class=\"section-title\">Try at Home Service</h2>\r\n          <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\r\n        </div>\r\n\r\n        <!-- Pincode Section -->\r\n        <!-- <div class=\"card\">\r\n          <h3 class=\"section-title\">\r\n            <svg class=\"icon\" viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\r\n            </svg>\r\n            Service Location\r\n          </h3>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Enter your pincode</label>\r\n            <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\r\n              maxlength=\"6\" />\r\n            <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\r\n              \u2713 Service available in your area\r\n            </div>\r\n          </div>\r\n        </div> -->\r\n\r\n        <!-- Date Selection -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Select a Date</h3>\r\n          <div class=\"date-grid\">\r\n            <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\r\n              [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\r\n              <div class=\"time\">\r\n                <div class=\"day\">{{day.day.substring(0,3)}}</div>\r\n                <div class=\"date\">{{day.date}}</div>\r\n              </div>\r\n              <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\r\n                Designs</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Time Selection -->\r\n        <div class=\"card\">\r\n          <div class=\"section\">\r\n            <h2 class=\"section-title\">Select a Time</h2>\r\n            <div class=\"time-grid\">\r\n              <div class=\"time-slot\" *ngFor=\"let time of timeSlots\" (click)=\"selectTime(time)\"\r\n                [ngClass]=\"{'selected': time === customerDetails.time}\">\r\n                <div class=\"more-slot-badge\">More Slot Left</div>\r\n                <div class=\"time-text\">{{time}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Customer Details -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Contact Details</h3>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Full Name *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Phone Number *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\r\n                placeholder=\"Enter your phone number\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Email *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">City *</label>\r\n              <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\r\n                placeholder=\"Enter your city\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">State *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Pincode *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\r\n                placeholder=\"Enter your phone number\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Complete Address *</label>\r\n            <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\r\n              placeholder=\"Enter your complete address\"></textarea>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Sidebar -->\r\n      <div class=\"sidebar\">\r\n        <div class=\"card\">\r\n          <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\r\n          <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\r\n\r\n          <div class=\"design-parent\">\r\n            <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\r\n              <div class=\"design-content\">\r\n                <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  alt=\"\">\r\n                <!-- <div class=\"\">Design Image</div> -->\r\n\r\n                <div class=\"design-info\">\r\n                  <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n                  <div class=\"item-price\">\r\n                    <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n                    <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\r\n                      number:\r\n                      '1.0-2'}}</span>\r\n                  </div>\r\n                  <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n                    <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n                      item.itemVariant.properties[varient] | uppercase }}</span>\r\n                  </div>\r\n                </div>\r\n                <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\r\n                {{ design.selected ? 'Selected' : 'Select' }}\r\n              </button> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"add-design\" (click)=\"addMoreDesign()\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n            </svg>\r\n            Add More Designs\r\n          </button>\r\n\r\n          <div class=\"summary\">\r\n            <!-- <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Selected Designs:</span>\r\n              <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\r\n            </div> -->\r\n            <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Service:</span>\r\n              <span class=\"summary-value free-service\">FREE</span>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\r\n            [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n            {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\r\n          </button>\r\n          <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\r\n            [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\r\n          <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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</main>\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\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: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$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: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, decorators: [{
             type: Component,
@@ -20096,7 +20119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ToastModule,
                         MatProgressSpinnerModule,
                         HoverElementsComponent
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"container\">\r\n    <div class=\"content-grid\">\r\n      <!-- Left Form Section -->\r\n      <div class=\"form-section\">\r\n        <!-- Service Description -->\r\n        <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <h2 class=\"section-title\">Try at Home Service</h2>\r\n          <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\r\n        </div>\r\n\r\n        <!-- Pincode Section -->\r\n        <!-- <div class=\"card\">\r\n          <h3 class=\"section-title\">\r\n            <svg class=\"icon\" viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\r\n            </svg>\r\n            Service Location\r\n          </h3>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Enter your pincode</label>\r\n            <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\r\n              maxlength=\"6\" />\r\n            <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\r\n              \u2713 Service available in your area\r\n            </div>\r\n          </div>\r\n        </div> -->\r\n\r\n        <!-- Date Selection -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Select a Date</h3>\r\n          <div class=\"date-grid\">\r\n            <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\r\n              [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\r\n              <div class=\"time\">\r\n                <div class=\"day\">{{day.day.substring(0,3)}}</div>\r\n                <div class=\"date\">{{day.date}}</div>\r\n              </div>\r\n              <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\r\n                Designs</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Time Selection -->\r\n        <div class=\"card\">\r\n          <div class=\"section\">\r\n            <h2 class=\"section-title\">Select a Time</h2>\r\n            <div class=\"time-grid\">\r\n              <div class=\"time-slot\" *ngFor=\"let time of timeSlots\" (click)=\"selectTime(time)\"\r\n                [ngClass]=\"{'selected': time === customerDetails.time}\">\r\n                <div class=\"more-slot-badge\">More Slot Left</div>\r\n                <div class=\"time-text\">{{time}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Customer Details -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Contact Details</h3>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Full Name *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Phone Number *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\r\n                placeholder=\"Enter your phone number\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Email *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">City *</label>\r\n              <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\r\n                placeholder=\"Enter your city\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">State *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Pincode *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\r\n                placeholder=\"Enter your phone number\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Complete Address *</label>\r\n            <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\r\n              placeholder=\"Enter your complete address\"></textarea>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Sidebar -->\r\n      <div class=\"sidebar\">\r\n        <div class=\"card\">\r\n          <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\r\n          <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\r\n\r\n          <div class=\"design-parent\">\r\n            <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\r\n              <div class=\"design-content\">\r\n                <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  alt=\"\">\r\n                <!-- <div class=\"\">Design Image</div> -->\r\n\r\n                <div class=\"design-info\">\r\n                  <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n                  <div class=\"item-price\">\r\n                    <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n                    <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\r\n                      number:\r\n                      '1.0-2'}}</span>\r\n                  </div>\r\n                  <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n                    <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n                      item.itemVariant.properties[varient] | uppercase }}</span>\r\n                  </div>\r\n                </div>\r\n                <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\r\n                {{ design.selected ? 'Selected' : 'Select' }}\r\n              </button> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"add-design\" (click)=\"addMoreDesign()\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n            </svg>\r\n            Add More Designs\r\n          </button>\r\n\r\n          <div class=\"summary\">\r\n            <!-- <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Selected Designs:</span>\r\n              <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\r\n            </div> -->\r\n            <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Service:</span>\r\n              <span class=\"summary-value free-service\">FREE</span>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\r\n            [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n            {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\r\n          </button>\r\n          <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\r\n            [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\r\n          <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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</main>\r\n", styles: ["*{font-family:var(--primary-font-family)!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"container\">\r\n    <div class=\"content-grid\">\r\n      <!-- Left Form Section -->\r\n      <div class=\"form-section\">\r\n        <!-- Service Description -->\r\n        <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <h2 class=\"section-title\">Try at Home Service</h2>\r\n          <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\r\n        </div>\r\n\r\n        <!-- Pincode Section -->\r\n        <!-- <div class=\"card\">\r\n          <h3 class=\"section-title\">\r\n            <svg class=\"icon\" viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\r\n            </svg>\r\n            Service Location\r\n          </h3>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Enter your pincode</label>\r\n            <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\r\n              maxlength=\"6\" />\r\n            <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\r\n              \u2713 Service available in your area\r\n            </div>\r\n          </div>\r\n        </div> -->\r\n\r\n        <!-- Date Selection -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Select a Date</h3>\r\n          <div class=\"date-grid\">\r\n            <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\r\n              [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\r\n              <div class=\"time\">\r\n                <div class=\"day\">{{day.day.substring(0,3)}}</div>\r\n                <div class=\"date\">{{day.date}}</div>\r\n              </div>\r\n              <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\r\n                Designs</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Time Selection -->\r\n        <div class=\"card\">\r\n          <div class=\"section\">\r\n            <h2 class=\"section-title\">Select a Time</h2>\r\n            <div class=\"time-grid\">\r\n              <div class=\"time-slot\" *ngFor=\"let time of timeSlots\" (click)=\"selectTime(time)\"\r\n                [ngClass]=\"{'selected': time === customerDetails.time}\">\r\n                <div class=\"more-slot-badge\">More Slot Left</div>\r\n                <div class=\"time-text\">{{time}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Customer Details -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Contact Details</h3>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Full Name *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Phone Number *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\r\n                placeholder=\"Enter your phone number\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Email *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">City *</label>\r\n              <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\r\n                placeholder=\"Enter your city\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">State *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Pincode *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\r\n                placeholder=\"Enter your phone number\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Complete Address *</label>\r\n            <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\r\n              placeholder=\"Enter your complete address\"></textarea>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Sidebar -->\r\n      <div class=\"sidebar\">\r\n        <div class=\"card\">\r\n          <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\r\n          <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\r\n\r\n          <div class=\"design-parent\">\r\n            <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\r\n              <div class=\"design-content\">\r\n                <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  alt=\"\">\r\n                <!-- <div class=\"\">Design Image</div> -->\r\n\r\n                <div class=\"design-info\">\r\n                  <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n                  <div class=\"item-price\">\r\n                    <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n                    <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\r\n                      number:\r\n                      '1.0-2'}}</span>\r\n                  </div>\r\n                  <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n                    <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n                      item.itemVariant.properties[varient] | uppercase }}</span>\r\n                  </div>\r\n                </div>\r\n                <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\r\n                {{ design.selected ? 'Selected' : 'Select' }}\r\n              </button> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"add-design\" (click)=\"addMoreDesign()\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n            </svg>\r\n            Add More Designs\r\n          </button>\r\n\r\n          <div class=\"summary\">\r\n            <!-- <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Selected Designs:</span>\r\n              <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\r\n            </div> -->\r\n            <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Service:</span>\r\n              <span class=\"summary-value free-service\">FREE</span>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\r\n            [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n            {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\r\n          </button>\r\n          <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\r\n            [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\r\n          <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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</main>\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\n"] }]
         }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }, { type: i2$2.Router }, { type: i4$1.MessageService }], propDecorators: { data: [{
                 type: Input
             }], index: [{