npm - simpo-component-library - Versions diffs - 3.6.953 → 3.6.956 - Mend

simpo-component-library 3.6.953 → 3.6.956

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/fesm2022/simpo-component-library.mjs CHANGED Viewed

@@ -20095,29 +20095,45 @@ class ProductDescComponent extends BaseSection {
             modalElement.click();
         }
     }
-    /** Lazily creates a ButtonModel at this index if the section's saved content predates that
-     * button existing (e.g. "Schedule a Video Call"/"Try at HOME" were added to this template after
-     * some businesses already had this section on their page - their saved `action.buttons` array
-     * is too short). Mutates the array in place so it becomes permanent once the page is next
-     * saved, fixing the slot for good - not just a display workaround. */
-    ensureButton(index, defaultLabel, defaultBackground) {
+    getButtonId(index) {
+        return this.data?.action?.buttons[index]?.id ?? "";
+    }
+    getButtonStyle(index) {
+        return this.data?.action?.buttons[index]?.styles;
+    }
+    /** Finds a button by a fixed, namespaced id rather than array position - unlike Add to
+     * Cart/Buy Now (index 0) and Find in Store (index 1), a new button can't safely claim "the next
+     * index" because every business's product-desc section is cloned from one shared server-side
+     * template that already carries a vestigial 3rd "View All" button on some businesses' saved
+     * content. Matching by a never-before-used id string means a fresh button is created only when
+     * one genuinely doesn't exist yet, and it's always created with a fully-populated `styles`
+     * object (see ButtonEditorComponent's falsy-styles handling) so editing it always saves. */
+    getOrCreateNamedButton(key, defaultLabel, defaultBackground) {
         const buttons = this.data?.action?.buttons;
         if (!buttons)
             return undefined;
-        while (buttons.length <= index) {
-            buttons.push({
-                id: `btn-${buttons.length}-${Date.now()}`,
+        let button = buttons.find((b) => b.id === key);
+        if (!button) {
+            button = {
+                id: key,
                 content: { linkType: RedirectionLinkType.Page, label: defaultLabel, redirectionUrl: '', pageId: '', newTab: false },
                 styles: { type: 'Solid', shape: 'Curve', colorType: 'Solid', background: defaultBackground, textColor: '#ffffff' }
-            });
+            };
+            buttons.push(button);
         }
-        return buttons[index];
+        return button;
+    }
+    getScheduleVideoCallButtonId() {
+        return this.getOrCreateNamedButton('scheduleVideoCallButton', 'Schedule a Video Call', '#230860')?.id ?? '';
     }
-    getButtonId(index, defaultLabel = '', defaultBackground = '#230860') {
-        return this.ensureButton(index, defaultLabel, defaultBackground)?.id ?? "";
+    getScheduleVideoCallButtonStyle() {
+        return this.getOrCreateNamedButton('scheduleVideoCallButton', 'Schedule a Video Call', '#230860')?.styles;
     }
-    getButtonStyle(index, defaultLabel = '', defaultBackground = '#230860') {
-        return this.ensureButton(index, defaultLabel, defaultBackground)?.styles;
+    getTryAtHomeButtonId() {
+        return this.getOrCreateNamedButton('tryAtHomeButton', 'Try at HOME', '#111827')?.id ?? '';
+    }
+    getTryAtHomeButtonStyle() {
+        return this.getOrCreateNamedButton('tryAtHomeButton', 'Try at HOME', '#111827')?.styles;
     }
     getRatings(noofratings) {
         if (noofratings >= 1000) {
@@ -20201,7 +20217,7 @@ class ProductDescComponent extends BaseSection {
         return currentDate;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1.Meta }, { token: i1.Title }, { token: i8$1.MatBottomSheet }, { token: i0.Renderer2 }, { token: i3$2.MatDialog }, { token: AnalyticsService }, { token: BookingProductCartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div> -->\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n      [simpoLayout]=\"styles?.layout\" #container>\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div> -->\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n          <div class=\"product-hero-card-modern\">\n            <ng-container *ngIf=\"isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n            </ng-container>\n          </div>\n\n\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <!-- Moved descriptors to Details tab below -->\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <!-- Moved tags to Details tab below -->\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <!-- Tabs Navigation -->\n      <div class=\"product-tabs-container\">\n        <ul class=\"tabs-list\">\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Details')\">Details</li>\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Reviews')\">Reviews</li>\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n        </ul>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content-pane\">\n        <div *ngIf=\"activeTab == 'Details'\">\n          <!-- Integrated descriptors and tags here -->\n          <div class=\"mt-2\">\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"activeTab == 'Reviews'\">\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n        </div>\n\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\n          <div class=\"pb-glass-container mt-2\">\n\n            <!-- One card per material \u2014 generic, works for any material type -->\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\n              <div class=\"pb-glass-card\">\n                <div class=\"pb-glass-header\"\n                     [style.background]=\"styles?.background?.accentColor\"\n                     [style.color]=\"'#fff'\">\n                  {{ ele?.materialName | titlecase }}\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Purity</span>\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Net Weight</span>\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Value</span>\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- Making Charges card -->\n            <div class=\"pb-glass-card\">\n              <div class=\"pb-glass-header\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                Making Charges\n              </div>\n              <!-- <div class=\"pb-glass-row\">\n                <span class=\"pb-label\">Net Weight</span>\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n              </div> -->\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\n                <span class=\"pb-label\">Making Charge %</span>\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n              </div>\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n                <span class=\"pb-label\">Value</span>\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n            <!-- Summary card -->\n            <div class=\"pb-summary-card\">\n              <div class=\"pb-summary-row\">\n                <span>Total Value</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-summary-row\">\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-grand-total\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                <span>TOTAL</span>\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </section>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n          message</mat-icon>Notify Me</button>\n    </div>\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-3\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-semibold\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"product-info-minimal\">\n    <!-- Item Code -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n    </div>\n\n    <!-- Title and Price Row -->\n    <div class=\"title-price-row-modern\">\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n      <div class=\"product-price-modern\">\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n          number:'1.0-0'}}\n      </div>\n    </div>\n\n    <!-- Rating Row -->\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n      <span class=\"separator\">|</span>\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n        {{responseData?.totalReviewCount}} reviews</span>\n    </div>\n\n    <!-- Brief Description -->\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc mt-2\">\n    <div>\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n          [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div> -->\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n          [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele?.materialName | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/{{ele?.unit | titlecase}}\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.purity |\n                    titlecase}}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container> -->\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\n      <div class=\"main-image-container p-0\">\n        <div class=\"item-img rounded-3\">\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n          </lib-ngx-image-zoom>\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n            class=\"w-100 h-100 object-fit-cover\">\n        </div>\n      </div>\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"bento-masonry-container\">\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n      </div>\n    </div>\n  </ng-container>\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n          Schedule a Video Call\n        </button>\n        <ng-container *ngIf=\"videoCallAdded\">\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n            <mat-icon>check_circle</mat-icon>\n            <span>Added to your Video Call request</span>\n          </div>\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n            Booking</button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section mb-2\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n            style=\"width: 100%;\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon d-flex align-items-center\">\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n            </svg>\n          </span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            expected Order will\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n  <!-- Try At Home Section -->\n  <div class=\"try-home-section\">\n    <div class=\"d-flex align-items-start try-home-item\">\n      <span class=\"home-icon d-flex align-items-center\">\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n        </svg>\n      </span>\n      <div class=\"try-home-details\">\n        <div class=\"try-home-header\">\n          <span class=\"try-home-text\">Try At Home</span>\n          <span class=\"free-text\"> (It's Free)</span>\n        </div>\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n        <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n      </div>\n    </div>\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(3, 'Try at HOME', '#111827')\" [buttonId]=\"getButtonId(3, 'Try at HOME', '#111827')\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(3, 'Try at HOME', '#111827')\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n        HOME</button>\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(3, 'Try at HOME', '#111827')\" [buttonId]=\"getButtonId(3, 'Try at HOME', '#111827')\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(3, 'Try at HOME', '#111827')\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n        Booking</button>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n  <!-- Nearest Store Section -->\n  <ng-container\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n    <div class=\"store-section\">\n      <div class=\"d-flex align-items-center store-item\">\n        <span class=\"store-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <div class=\"store-details\">\n          <div class=\"store-text\">\n            <span class=\"store-label\">Nearest Store - </span>\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\n          </div>\n          <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n          <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-center w-100\">\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n          STORE</button>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #emptyStore>\n    <div class=\"delivery-section\">\n      <div class=\"d-flex align-items-center\">\n        <span class=\"delivery-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <span class=\"delivery-text\">No Stores are available</span>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n    <!-- Header: Title + Average | Bar Chart -->\n    <div class=\"rv-header\">\n      <div class=\"rv-header-left\">\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\n        <div class=\"rv-average-row\">\n          <!-- filled stars -->\n          <div class=\"rv-stars\">\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                  fill=\"#eab308\" />\n              </svg>\n            </ng-container>\n          </div>\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n          <span class=\"rv-avg-label\">average</span>\n        </div>\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n          {{responseData?.totalReviewCount | number}} Reviews\n        </div>\n      </div>\n\n      <div class=\"rv-bars\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"rv-bar-row\">\n            <span class=\"rv-bar-label\">{{rating}}</span>\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                fill=\"#eab308\" />\n            </svg>\n            <div class=\"rv-bar-track\">\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Review Cards Grid -->\n    <div class=\"rv-grid\">\n      <ng-container *ngFor=\"let review of reviewsData\">\n        <ng-container *ngIf=\"review.review\">\n          <div class=\"rv-card\">\n            <div class=\"rv-card-top\">\n              <div class=\"rv-reviewer\">\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n                  class=\"rv-avatar\" alt=\"\">\n                <div class=\"rv-name-date\">\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n                </div>\n              </div>\n              <!-- Star rating -->\n              <div class=\"rv-card-stars\">\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                </ng-container>\n              </div>\n            </div>\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n            <!-- Review Images -->\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n              </a>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i17.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "isBrowseProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "aboveHeight", first: true, predicate: ["aboveHeight"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "imageSection", first: true, predicate: ["imageSection"], descendants: true }, { propertyName: "detailSection", first: true, predicate: ["detailSection"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div> -->\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n      [simpoLayout]=\"styles?.layout\" #container>\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div> -->\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n          <div class=\"product-hero-card-modern\">\n            <ng-container *ngIf=\"isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n            </ng-container>\n          </div>\n\n\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <!-- Moved descriptors to Details tab below -->\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <!-- Moved tags to Details tab below -->\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <!-- Tabs Navigation -->\n      <div class=\"product-tabs-container\">\n        <ul class=\"tabs-list\">\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Details')\">Details</li>\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Reviews')\">Reviews</li>\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n        </ul>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content-pane\">\n        <div *ngIf=\"activeTab == 'Details'\">\n          <!-- Integrated descriptors and tags here -->\n          <div class=\"mt-2\">\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"activeTab == 'Reviews'\">\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n        </div>\n\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\n          <div class=\"pb-glass-container mt-2\">\n\n            <!-- One card per material \u2014 generic, works for any material type -->\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\n              <div class=\"pb-glass-card\">\n                <div class=\"pb-glass-header\"\n                     [style.background]=\"styles?.background?.accentColor\"\n                     [style.color]=\"'#fff'\">\n                  {{ ele?.materialName | titlecase }}\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Purity</span>\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Net Weight</span>\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Value</span>\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- Making Charges card -->\n            <div class=\"pb-glass-card\">\n              <div class=\"pb-glass-header\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                Making Charges\n              </div>\n              <!-- <div class=\"pb-glass-row\">\n                <span class=\"pb-label\">Net Weight</span>\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n              </div> -->\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\n                <span class=\"pb-label\">Making Charge %</span>\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n              </div>\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n                <span class=\"pb-label\">Value</span>\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n            <!-- Summary card -->\n            <div class=\"pb-summary-card\">\n              <div class=\"pb-summary-row\">\n                <span>Total Value</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-summary-row\">\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-grand-total\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                <span>TOTAL</span>\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </section>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n          message</mat-icon>Notify Me</button>\n    </div>\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-3\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-semibold\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"product-info-minimal\">\n    <!-- Item Code -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n    </div>\n\n    <!-- Title and Price Row -->\n    <div class=\"title-price-row-modern\">\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n      <div class=\"product-price-modern\">\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n          number:'1.0-0'}}\n      </div>\n    </div>\n\n    <!-- Rating Row -->\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n      <span class=\"separator\">|</span>\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n        {{responseData?.totalReviewCount}} reviews</span>\n    </div>\n\n    <!-- Brief Description -->\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc mt-2\">\n    <div>\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n          [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div> -->\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n          [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele?.materialName | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/{{ele?.unit | titlecase}}\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.purity |\n                    titlecase}}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container> -->\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\n      <div class=\"main-image-container p-0\">\n        <div class=\"item-img rounded-3\">\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n          </lib-ngx-image-zoom>\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n            class=\"w-100 h-100 object-fit-cover\">\n        </div>\n      </div>\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"bento-masonry-container\">\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n      </div>\n    </div>\n  </ng-container>\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n          Schedule a Video Call\n        </button>\n        <ng-container *ngIf=\"videoCallAdded\">\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n            <mat-icon>check_circle</mat-icon>\n            <span>Added to your Video Call request</span>\n          </div>\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n            Booking</button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section mb-2\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n            style=\"width: 100%;\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon d-flex align-items-center\">\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n            </svg>\n          </span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            expected Order will\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n  <!-- Try At Home Section -->\n  <div class=\"try-home-section\">\n    <div class=\"d-flex align-items-start try-home-item\">\n      <span class=\"home-icon d-flex align-items-center\">\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n        </svg>\n      </span>\n      <div class=\"try-home-details\">\n        <div class=\"try-home-header\">\n          <span class=\"try-home-text\">Try At Home</span>\n          <span class=\"free-text\"> (It's Free)</span>\n        </div>\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n        <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n      </div>\n    </div>\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n        HOME</button>\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n        Booking</button>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n  <!-- Nearest Store Section -->\n  <ng-container\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n    <div class=\"store-section\">\n      <div class=\"d-flex align-items-center store-item\">\n        <span class=\"store-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <div class=\"store-details\">\n          <div class=\"store-text\">\n            <span class=\"store-label\">Nearest Store - </span>\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\n          </div>\n          <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n          <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-center w-100\">\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n          STORE</button>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #emptyStore>\n    <div class=\"delivery-section\">\n      <div class=\"d-flex align-items-center\">\n        <span class=\"delivery-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <span class=\"delivery-text\">No Stores are available</span>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n    <!-- Header: Title + Average | Bar Chart -->\n    <div class=\"rv-header\">\n      <div class=\"rv-header-left\">\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\n        <div class=\"rv-average-row\">\n          <!-- filled stars -->\n          <div class=\"rv-stars\">\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                  fill=\"#eab308\" />\n              </svg>\n            </ng-container>\n          </div>\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n          <span class=\"rv-avg-label\">average</span>\n        </div>\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n          {{responseData?.totalReviewCount | number}} Reviews\n        </div>\n      </div>\n\n      <div class=\"rv-bars\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"rv-bar-row\">\n            <span class=\"rv-bar-label\">{{rating}}</span>\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                fill=\"#eab308\" />\n            </svg>\n            <div class=\"rv-bar-track\">\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Review Cards Grid -->\n    <div class=\"rv-grid\">\n      <ng-container *ngFor=\"let review of reviewsData\">\n        <ng-container *ngIf=\"review.review\">\n          <div class=\"rv-card\">\n            <div class=\"rv-card-top\">\n              <div class=\"rv-reviewer\">\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n                  class=\"rv-avatar\" alt=\"\">\n                <div class=\"rv-name-date\">\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n                </div>\n              </div>\n              <!-- Star rating -->\n              <div class=\"rv-card-stars\">\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                </ng-container>\n              </div>\n            </div>\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n            <!-- Review Images -->\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n              </a>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i17.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "isBrowseProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -20233,7 +20249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         SanitizeHtmlPipe,
                         NgxSkeletonLoaderModule
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div> -->\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n      [simpoLayout]=\"styles?.layout\" #container>\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div> -->\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n          <div class=\"product-hero-card-modern\">\n            <ng-container *ngIf=\"isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n            </ng-container>\n          </div>\n\n\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <!-- Moved descriptors to Details tab below -->\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <!-- Moved tags to Details tab below -->\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <!-- Tabs Navigation -->\n      <div class=\"product-tabs-container\">\n        <ul class=\"tabs-list\">\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Details')\">Details</li>\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Reviews')\">Reviews</li>\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n        </ul>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content-pane\">\n        <div *ngIf=\"activeTab == 'Details'\">\n          <!-- Integrated descriptors and tags here -->\n          <div class=\"mt-2\">\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"activeTab == 'Reviews'\">\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n        </div>\n\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\n          <div class=\"pb-glass-container mt-2\">\n\n            <!-- One card per material \u2014 generic, works for any material type -->\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\n              <div class=\"pb-glass-card\">\n                <div class=\"pb-glass-header\"\n                     [style.background]=\"styles?.background?.accentColor\"\n                     [style.color]=\"'#fff'\">\n                  {{ ele?.materialName | titlecase }}\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Purity</span>\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Net Weight</span>\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Value</span>\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- Making Charges card -->\n            <div class=\"pb-glass-card\">\n              <div class=\"pb-glass-header\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                Making Charges\n              </div>\n              <!-- <div class=\"pb-glass-row\">\n                <span class=\"pb-label\">Net Weight</span>\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n              </div> -->\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\n                <span class=\"pb-label\">Making Charge %</span>\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n              </div>\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n                <span class=\"pb-label\">Value</span>\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n            <!-- Summary card -->\n            <div class=\"pb-summary-card\">\n              <div class=\"pb-summary-row\">\n                <span>Total Value</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-summary-row\">\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-grand-total\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                <span>TOTAL</span>\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </section>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n          message</mat-icon>Notify Me</button>\n    </div>\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-3\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-semibold\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"product-info-minimal\">\n    <!-- Item Code -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n    </div>\n\n    <!-- Title and Price Row -->\n    <div class=\"title-price-row-modern\">\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n      <div class=\"product-price-modern\">\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n          number:'1.0-0'}}\n      </div>\n    </div>\n\n    <!-- Rating Row -->\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n      <span class=\"separator\">|</span>\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n        {{responseData?.totalReviewCount}} reviews</span>\n    </div>\n\n    <!-- Brief Description -->\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc mt-2\">\n    <div>\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n          [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div> -->\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n          [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele?.materialName | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/{{ele?.unit | titlecase}}\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.purity |\n                    titlecase}}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container> -->\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\n      <div class=\"main-image-container p-0\">\n        <div class=\"item-img rounded-3\">\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n          </lib-ngx-image-zoom>\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n            class=\"w-100 h-100 object-fit-cover\">\n        </div>\n      </div>\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"bento-masonry-container\">\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n      </div>\n    </div>\n  </ng-container>\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n          Schedule a Video Call\n        </button>\n        <ng-container *ngIf=\"videoCallAdded\">\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n            <mat-icon>check_circle</mat-icon>\n            <span>Added to your Video Call request</span>\n          </div>\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n            Booking</button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section mb-2\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n            style=\"width: 100%;\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon d-flex align-items-center\">\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n            </svg>\n          </span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            expected Order will\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n  <!-- Try At Home Section -->\n  <div class=\"try-home-section\">\n    <div class=\"d-flex align-items-start try-home-item\">\n      <span class=\"home-icon d-flex align-items-center\">\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n        </svg>\n      </span>\n      <div class=\"try-home-details\">\n        <div class=\"try-home-header\">\n          <span class=\"try-home-text\">Try At Home</span>\n          <span class=\"free-text\"> (It's Free)</span>\n        </div>\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n        <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n      </div>\n    </div>\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(3, 'Try at HOME', '#111827')\" [buttonId]=\"getButtonId(3, 'Try at HOME', '#111827')\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(3, 'Try at HOME', '#111827')\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n        HOME</button>\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(3, 'Try at HOME', '#111827')\" [buttonId]=\"getButtonId(3, 'Try at HOME', '#111827')\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(3, 'Try at HOME', '#111827')\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n        Booking</button>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n  <!-- Nearest Store Section -->\n  <ng-container\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n    <div class=\"store-section\">\n      <div class=\"d-flex align-items-center store-item\">\n        <span class=\"store-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <div class=\"store-details\">\n          <div class=\"store-text\">\n            <span class=\"store-label\">Nearest Store - </span>\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\n          </div>\n          <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n          <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-center w-100\">\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n          STORE</button>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #emptyStore>\n    <div class=\"delivery-section\">\n      <div class=\"d-flex align-items-center\">\n        <span class=\"delivery-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <span class=\"delivery-text\">No Stores are available</span>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n    <!-- Header: Title + Average | Bar Chart -->\n    <div class=\"rv-header\">\n      <div class=\"rv-header-left\">\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\n        <div class=\"rv-average-row\">\n          <!-- filled stars -->\n          <div class=\"rv-stars\">\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                  fill=\"#eab308\" />\n              </svg>\n            </ng-container>\n          </div>\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n          <span class=\"rv-avg-label\">average</span>\n        </div>\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n          {{responseData?.totalReviewCount | number}} Reviews\n        </div>\n      </div>\n\n      <div class=\"rv-bars\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"rv-bar-row\">\n            <span class=\"rv-bar-label\">{{rating}}</span>\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                fill=\"#eab308\" />\n            </svg>\n            <div class=\"rv-bar-track\">\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Review Cards Grid -->\n    <div class=\"rv-grid\">\n      <ng-container *ngFor=\"let review of reviewsData\">\n        <ng-container *ngIf=\"review.review\">\n          <div class=\"rv-card\">\n            <div class=\"rv-card-top\">\n              <div class=\"rv-reviewer\">\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n                  class=\"rv-avatar\" alt=\"\">\n                <div class=\"rv-name-date\">\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n                </div>\n              </div>\n              <!-- Star rating -->\n              <div class=\"rv-card-stars\">\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                </ng-container>\n              </div>\n            </div>\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n            <!-- Review Images -->\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n              </a>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n    <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n    </div> -->\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [spacingHorizontal]=\"stylesLayout\"\n      [simpoLayout]=\"styles?.layout\" #container>\n      <!-- <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\n          (click)=\"routeToHome()\">Home</a> /\n        <span>{{ responseData?.name | titlecase }}</span>\n      </div> -->\n      <div class=\"row m-0 w-100 mt-lg-4 h-auto overflow-visible\" #aboveHeight>\n        <div class=\"col-lg-6 col-sm-12 image-section-modern\" #imageSection>\n          <div class=\"d-flex flex-column justify-content-start gap-1\">\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n          </div>\n        </div>\n        <div class=\"col-lg-6 col-sm-12 detail-section-modern \" #detailSection>\n          <div class=\"product-hero-card-modern\">\n            <ng-container *ngIf=\"isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n            </ng-container>\n\n            <ng-container *ngIf=\"!isMobile\">\n              <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n            </ng-container>\n          </div>\n\n\n          <ng-container *ngIf=\"ecomConfigs?.deliveryEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.deliveryEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.storesEnabled\">\n            <!-- *ngIf=\"ecomConfigs?.storesEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"StoreSection\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.homeVisitProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"TryAtHome\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"appointmentSettings?.videoCallProductsEnabled\">\n            <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n            <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\n          </ng-container>\n\n          <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\n            <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n          </ng-container>\n\n\n\n          <!-- Moved descriptors to Details tab below -->\n\n          <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\n            [innerHTML]=\"responseData.brief\"></div> -->\n          <!-- Moved tags to Details tab below -->\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n          <!-- <ng-container>\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n          </ng-container> -->\n        </div>\n      </div>\n      <!-- Tabs Navigation -->\n      <div class=\"product-tabs-container\">\n        <ul class=\"tabs-list\">\n          <li class=\"tab-item\" [class.active]=\"activeTab == 'Details'\"\n            [style.color]=\"activeTab == 'Details' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Details' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Details')\">Details</li>\n          <li class=\"tab-item\" *ngIf=\"reviewsData\" [class.active]=\"activeTab == 'Reviews'\"\n            [style.color]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'Reviews' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('Reviews')\">Reviews</li>\n          <li class=\"tab-item\" *ngIf=\"materialBasedPricing\" [class.active]=\"activeTab == 'PriceBreakup'\"\n            [style.color]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : ''\"\n            [style.borderColor]=\"activeTab == 'PriceBreakup' ? styles?.background?.accentColor : 'transparent'\"\n            (click)=\"changeTab('PriceBreakup')\">Price Breakup</li>\n        </ul>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content-pane\">\n        <div *ngIf=\"activeTab == 'Details'\">\n          <!-- Integrated descriptors and tags here -->\n          <div class=\"mt-2\">\n            <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\n          </div>\n        </div>\n\n        <div *ngIf=\"activeTab == 'Reviews'\">\n          <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\n        </div>\n\n        <div *ngIf=\"activeTab == 'PriceBreakup'\">\n          <div class=\"pb-glass-container mt-2\">\n\n            <!-- One card per material \u2014 generic, works for any material type -->\n            <ng-container *ngFor=\"let ele of responseData?.materials\">\n              <div class=\"pb-glass-card\">\n                <div class=\"pb-glass-header\"\n                     [style.background]=\"styles?.background?.accentColor\"\n                     [style.color]=\"'#fff'\">\n                  {{ ele?.materialName | titlecase }}\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Purity</span>\n                  <span class=\"pb-value\">{{ ele?.purity }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Net Weight</span>\n                  <span class=\"pb-value\">{{ ele?.quantity }} {{ ele?.unit | titlecase }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Rate / {{ ele?.unit | titlecase }}</span>\n                  <span class=\"pb-value\">\u20B9{{ ele?.pricePerUnit | number:'1.2-2' }}</span>\n                </div>\n                <div class=\"pb-glass-row\">\n                  <span class=\"pb-label\">Value</span>\n                  <span class=\"pb-value\">\u20B9{{ (ele?.quantity * ele?.pricePerUnit) | number:'1.2-2' }}</span>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- Making Charges card -->\n            <div class=\"pb-glass-card\">\n              <div class=\"pb-glass-header\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                Making Charges\n              </div>\n              <!-- <div class=\"pb-glass-row\">\n                <span class=\"pb-label\">Net Weight</span>\n                <span class=\"pb-value\">{{ responseData?.baseWeight }}</span>\n              </div> -->\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.makingChargePercentage  && responseData.makingChargePercentage > 0\">\n                <span class=\"pb-label\">Making Charge %</span>\n                <span class=\"pb-value\">{{ responseData?.makingChargePercentage }}%</span>\n              </div>\n              <div class=\"pb-glass-row\" *ngIf=\"responseData?.jewelryPriceBreakup?.makingChargeAmount && responseData?.jewelryPriceBreakup?.makingChargeAmount > 0\">\n                <span class=\"pb-label\">Value</span>\n                <span class=\"pb-value\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n            <!-- Summary card -->\n            <div class=\"pb-summary-card\">\n              <div class=\"pb-summary-row\">\n                <span>Total Value</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.priceWithoutTax | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-summary-row\">\n                <span>Tax ({{ responseData?.jewelryPriceBreakup?.taxRef?.taxPercent }}% GST)</span>\n                <span>\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}</span>\n              </div>\n              <div class=\"pb-grand-total\"\n                   [style.background]=\"styles?.background?.accentColor\"\n                   [style.color]=\"'#fff'\">\n                <span>TOTAL</span>\n                <span>\u20B9{{ (responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) | number:'1.2-2' }}</span>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </section>\n    <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n    </ng-container>\n    <!-- <ng-container *ngIf=\"recentViewItemList?.length\">\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\n    </ng-container> -->\n    <!-- <ng-container>\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n    </ng-container> -->\n\n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n        [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n  </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n  <div class=\"icons\">\n    <div (click)=\"goToCart()\">\n      <mat-icon>shopping_cart</mat-icon>\n    </div>\n    <div>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n  </div>\n  <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n    [id]=\"data?.id+getButtonId(0)\">Out of\n    Stock</button>\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n    [style.borderColor]=\"data?.styles?.background?.accentColor\">\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n      [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n    <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n  </div>\n  <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n    <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n  <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\n    <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n      [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n  </div>\n</div>\n\n<ng-template #ReviewSection>\n  <div class=\"review-sec\">\n    <div class=\"title\">Customer Review</div>\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n    <span>Be the first to write a review</span>\n    <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n      [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\n      Review' : 'Cancel Review'}}</button>\n    <ng-container *ngIf=\"showReview\">\n      <hr />\n      <div class=\"user-review\">\n        <div class=\"title\">Write a review</div>\n        <span class=\"secondary-text\">RATING</span>\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n        <div>\n          <span class=\"secondary-text\">Review Title</span>\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n        </div>\n        <div>\n          <span class=\"secondary-text\">Review</span>\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n        </div>\n        <div class=\"review-action-btn\">\n          <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n          <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n            [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\n            (click)=\"addProductReview()\"\n            [disabled]=\"productReview == 0 && !reviewTitle?.length && !reviewDescription?.length\">Submit\n            review</button>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SocialIcons>\n  <div class=\"d-flex\">\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n          <div style=\"position: relative;margin-right: 10px;\">\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n              [sectionId]=\"data?.id\"></simpo-socia-icons>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n  <div class=\"button-parent\">\n    <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\n      simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n      [id]=\"data?.id+getButtonId(0)\">Out of\n      Stock</button>\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity && !appointmentSettings?.videoCallProductsEnabled\"\n      [style.borderColor]=\"data?.styles?.background?.accentColor\">\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\n        [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\n      <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\n    </div>\n    <button *ngIf=\"responseData?.quantity && appointmentSettings?.videoCallProductsEnabled && !videoCallAdded\" class=\"send-btn w-100\"\n      [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n      [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n      (click)=\"!edit ? addVideoCallCurrent() : ''\">\n      <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75 mt-2\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\"\n        (click)=\"!edit ? buyNow() : ''\">Buy Now</button>\n    </div>\n    <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\n      <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\n          message</mat-icon>Notify Me</button>\n    </div>\n    <div class=\"favourite\" *ngIf=\"IsEcommerce\" (click)=\"isItemAsFavorite ? removeToFavourite() : addToFavourite()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\"\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n    </div>\n    <div class=\"share-icon\" (click)=\"shareProduct()\">\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\">share</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #variants>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"mb-3\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\n    <ng-container>\n      <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n        <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\n          [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\n          <div class=\"variant-head\">{{item.key | titlecase}}</div>\n          <div class=\"variant-value text-start fw-semibold\">\n            {{item.value |\n            titlecase}}</div>\n        </div>\n        <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\n          <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\n            data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\n            [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n  <div class=\"product-info-minimal\">\n    <!-- Item Code -->\n    <div class=\"item-code-row\" *ngIf=\"responseData?.itemCode\">\n      <span class=\"item-code-value\">{{ formatItemCode(responseData?.itemCode) }}</span>\n    </div>\n\n    <!-- Title and Price Row -->\n    <div class=\"title-price-row-modern\">\n      <h1 class=\"product-title-modern\">{{responseData?.name}}</h1>\n      <div class=\"product-price-modern\">\n        <span [innerHTML]=\"currency\"></span> {{responseData?.price?.sellingPrice |\n          number:'1.0-0'}}\n      </div>\n    </div>\n\n    <!-- Rating Row -->\n    <div class=\"rating-row-modern\" *ngIf=\"responseData?.averageRating\">\n      <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n      <span class=\"rating-score\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n      <span class=\"separator\">|</span>\n      <span class=\"reviews-link\" [style.color]=\"styles?.background?.accentColor\">\n        {{responseData?.totalReviewCount}} reviews</span>\n    </div>\n\n    <!-- Brief Description -->\n    <div class=\"product-brief-modern\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData?.brief | sanitizeHtml\">\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #descriptors>\n  <div class=\"row prod-desc mt-2\">\n    <div>\n      <!-- <div class=\"product-header d-flex align-items-center justify-content-between\">\n        <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\n        <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\n          *ngIf=\"materialBasedPricing\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRightPriceBreakup\"\n          [style.background]=\"data?.styles?.background?.accentColor\"\n          [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\n          <mat-icon>add</mat-icon> PRICE BREAKUP\n        </div>\n      </div> -->\n      <div class=\"description\">\n        <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n          [innerHTML]=\"responseData?.descriptor?.name | sanitizeHtml\"\n          [style.background]=\"data?.styles?.background?.color\"></div>\n      </div>\n      <!-- <ng-container *ngIf=\"materialBasedPricing\">\n        <div class=\"jewellery-table-container\">\n          <ng-container *ngFor=\"let ele of responseData?.materials\">\n            <div class=\"jewel-container mt-2\">\n              <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\n                {{ele?.materialName | titlecase}}\n              </div>\n              <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Net Weight/{{ele?.unit | titlecase}}\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.quantity + \" \" + (ele?.unit | titlecase)}}\n                  </div>\n                </div>\n                <div class=\"col-6 metal-purity\">\n                  <div class=\"row-header\">\n                    Purity\n                  </div>\n                  <div class=\"row-content\">\n                    {{ele.purity |\n                    titlecase}}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container> -->\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n  <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\n    <div class=\"style-1-vertical d-flex flex-column w-100\">\n      <div class=\"main-image-container p-0\">\n        <div class=\"item-img rounded-3\">\n          <lib-ngx-image-zoom *ngIf=\"currentImg\" [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n            [magnification]=\"0.4\" [enableScrollZoom]=\"false\">\n          </lib-ngx-image-zoom>\n          <img *ngIf=\"!currentImg\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\"\n            class=\"w-100 h-100 object-fit-cover\">\n        </div>\n      </div>\n      <div class=\"thumbnail-row py-3 d-flex gap-2 overflow-auto hide-scroll\">\n        <img class=\"img thumbnail-img\" *ngFor=\"let img of itemImages\" [src]=\"img.imgUrl\" (click)=\"changeImg(img.imgUrl)\"\n          [class.active-thumb]=\"currentImg == img.imgUrl\"\n          style=\"cursor: pointer; min-width: 80px; width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid transparent;\"\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\n    <div class=\"bento-masonry-container\">\n      <div *ngFor=\"let img of itemImages; let i = index\" class=\"bento-item-modern\">\n        <img [src]=\"img.imgUrl\" class=\"bento-img-modern\" (click)=\"changeImg(img.imgUrl)\">\n      </div>\n    </div>\n  </ng-container>\n\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n      width: '100%',\n      height: '100%',\n      'border-radius': '10px'\n    }\">\n    </ngx-skeleton-loader>\n  </div>\n</ng-template>\n\n<ng-template #branding>\n  <div class=\"row w-100\">\n    <ng-container *ngFor=\"let brand of brandPromises\">\n      <div class=\"col-4 d-flex flex-column align-items-center g-2\">\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n          [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 rounded-circle\">\n        <div class=\"brand-text w-100 text-center py-2\">\n          {{brand?.title | titlecase}}\n        </div>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #videoCallSchedule>\n  <!-- *ngIf=\"appointmentSettings?.videoCallProductsEnabled\" -->\n  <ng-container>\n    <div class=\"row w-100 video-container\">\n      <div class=\"col-4 video-call-img\">\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/697639c1786974532510Video_conference live.svg\"\n          alt=\"\" class=\"w-100 h-100 \">\n      </div>\n      <div class=\"col-8 align-content-center\">\n        <div class=\"video-head-text\">\n          Live Video Call\n        </div>\n        <div class=\"sub-text\">\n          Join a live video call with our consultants to see your favourite designs up close!\n        </div>\n        <button class=\"sch-btn text-center cursor-pointer\" *ngIf=\"!videoCallAdded\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? addVideoCallCurrent() : ''\">\n          Schedule a Video Call\n        </button>\n        <ng-container *ngIf=\"videoCallAdded\">\n          <div class=\"d-flex align-items-center gap-2\" style=\"color:#1E7A4B;\">\n            <mat-icon>check_circle</mat-icon>\n            <span>Added to your Video Call request</span>\n          </div>\n          <button class=\"sch-btn text-center cursor-pointer mt-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n            [buttonStyle]=\"getScheduleVideoCallButtonStyle()\" [buttonId]=\"getScheduleVideoCallButtonId()\" [sectionId]=\"data?.id\"\n            [id]=\"data?.id+getScheduleVideoCallButtonId()\" (click)=\"!edit ? continueVideoCallBooking() : ''\">Continue\n            Booking</button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #DeliverySection>\n  <div class=\"delivery-container\">\n    <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\n\n    <!-- Location Section -->\n    <div class=\"location-section mb-2\">\n      <div class=\"location-container d-flex align-items-center justify-content-between\"\n        [style.borderColor]=\"styles?.background?.accentColor\">\n        <div class=\"d-flex align-items-center flex-grow-1 me-2\" style=\"width: calc(100% - 100px);\">\n          <div class=\"d-flex mx-1\"><mat-icon\n              class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\n          </div>\n          <input type=\"number\" class=\"postal-code-input flex-grow-1\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\"\n            style=\"width: 100%;\">\n        </div>\n        <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Submit</button>\n      </div>\n      <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\n    </div>\n\n    <ng-container *ngIf=\"(pincode?.toString().length ?? 0) == 6\">\n      <!-- Free Delivery Section -->\n      <div class=\"delivery-section\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"delivery-icon d-flex align-items-center\">\n            <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\n              height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" class=\"feather feather-gift\">\n              <polyline points=\"20 12 20 22 4 22 4 12\"></polyline>\n              <rect x=\"2\" y=\"7\" width=\"20\" height=\"5\"></rect>\n              <line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"></line>\n              <path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"></path>\n              <path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"></path>\n            </svg>\n          </span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Expected\n            Delivery by {{ getDateAfterxDays() | date:'d MMM' }}</span>\n\n          <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\n            expected Order will\n            Deliver by {{ getDateAfterxDays() | date:'d MMM' }} with a Delivery Charge of\n            \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #TryAtHome>\n  <!-- Try At Home Section -->\n  <div class=\"try-home-section\">\n    <div class=\"d-flex align-items-start try-home-item\">\n      <span class=\"home-icon d-flex align-items-center\">\n        <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n          viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" class=\"feather feather-home\">\n          <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path>\n          <polyline points=\"9 22 9 12 15 12 15 22\"></polyline>\n        </svg>\n      </span>\n      <div class=\"try-home-details\">\n        <div class=\"try-home-header\">\n          <span class=\"try-home-text\">Try At Home</span>\n          <span class=\"free-text\"> (It's Free)</span>\n        </div>\n        <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\n        <!-- <div class=\"appointment-text\">\n              Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\n            </div> -->\n      </div>\n    </div>\n    <div class=\"d-flex-align-items-center justify-content-center w-100\">\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? addToTrialCart() : ''\" *ngIf=\"!isItemAddedAsTrial\">Try at\n        HOME</button>\n      <button class=\"book-appointment-btn\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n        [buttonStyle]=\"getTryAtHomeButtonStyle()\" [buttonId]=\"getTryAtHomeButtonId()\" [sectionId]=\"data?.id\"\n        [id]=\"data?.id+getTryAtHomeButtonId()\" (click)=\"!edit ? continueHomeVisitBooking() : ''\" *ngIf=\"isItemAddedAsTrial\">Continue\n        Booking</button>\n    </div>\n  </div>\n\n</ng-template>\n\n<ng-template #StoreSection>\n  <!-- Nearest Store Section -->\n  <ng-container\n    *ngIf=\"storeDetails?.nearbyStore?.storeName && storeDetails?.nearbyStore?.storeName?.length > 0\">\n    <div class=\"store-section\">\n      <div class=\"d-flex align-items-center store-item\">\n        <span class=\"store-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <div class=\"store-details\">\n          <div class=\"store-text\">\n            <span class=\"store-label\">Nearest Store - </span>\n            <span class=\"store-name\">{{ storeDetails?.nearbyStore?.storeName | titlecase}}</span>\n            <!-- <span class=\"store-distance\"> (4km)</span> -->\n          </div>\n          <!-- <div class=\"availability-section\">\n              <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\n            </div> -->\n          <!-- <div class=\"other-stores-text\">\n              Also Available in <span class=\"other-stores-link\">18 other stores</span>\n            </div> -->\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-center w-100\">\n        <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n          [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\n          [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.id)\">FIND IN\n          STORE</button>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #emptyStore>\n    <div class=\"delivery-section\">\n      <div class=\"d-flex align-items-center\">\n        <span class=\"delivery-icon d-flex align-items-center\">\n          <svg [style.color]=\"styles?.background?.accentColor\" xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\n            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" class=\"feather feather-shopping-bag\">\n            <path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n          </svg>\n        </span>\n        <span class=\"delivery-text\">No Stores are available</span>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\n  aria-labelledby=\"offcanvasRightLabel\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price px-3 pb-2\">\n    <div class=\"price-text\">Price</div>\n    <div class=\"d-flex  g-3 align-items-center\">\n      <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n        *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.discountedPrice}}</div>\n      <div class=\"price\"\n        *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\n        [ngClass]=\"{'text-decoration-line-through': responseData?.price?.discountedPrice}\"><span\n          [innerHTML]='currency'></span>\n        {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n    </div>\n  </div>\n  <div class=\"varient-container h-100 p-3\">\n    <ng-container *ngFor=\"let varient of varients | keyvalue\">\n      <div class=\"varient-data\">\n        <div class=\"varient-key\">{{varient.key}}</div>\n        <div class=\"d-flex\" style=\"gap: 5px;\">\n          <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n            [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n            [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n            (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n  <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\n    [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\n    Customization</div>\n</div>\n\n\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\n  <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\n    <mat-icon data-bs-dismiss=\"offcanvas\"\n      class=\"cursor-pointer d-flex align-items-center justify-content-center fs-5\">close</mat-icon>\n  </div>\n  <div class=\"varient-price p-10-20\">\n    <div class=\"price-break-header\">{{responseData?.name}}</div>\n  </div>\n  <div class=\"price-breakup h-100 w-100\">\n    <ng-container *ngFor=\"let ele of responseData?.materials\">\n      <div class=\"price-container mb-3 p-10-20\">\n        <div class=\"price-container-header\">\n          {{ ele.materialType + \" BREAKUP\" }}\n        </div>\n        <div class=\"row w-100 header-row\">\n          <div class=\"col-3 text-center\">COMPONENT</div>\n          <div class=\"col-3 text-center\">RATE</div>\n          <div class=\"col-3 text-center\">WEIGHT</div>\n          <div class=\"col-3 text-center\">FINAL VALUE</div>\n        </div>\n        <div class=\"row w-100 value-row\">\n          <div class=\"col-3 text-center\">{{ ele.purity | titlecase }}</div>\n          <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.pricePerUnit,ele.materialType) |\n            number:'1.2-2' }}</div>\n          <div class=\"col-3 text-center\">{{ele.quantity + ' ' + (ele.unit | titlecase)}}</div>\n          <div class=\"col-3 text-center total\">\u20B9{{ ele.pricePerUnit * ele.quantity | number }}</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Making Charges</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Tax Amount</div>\n        <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\n        </div>\n      </div>\n      <div class=\"row w-100 summary-row\">\n        <div class=\"col-6 text-start\">Total Amount</div>\n        <div class=\"col-6 text-end total\">\n          \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\n          number:'1.2-2'}}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #ReviewsSection>\n  <div class=\"rv-section\" *ngIf=\"reviewsData\">\n\n    <!-- Header: Title + Average | Bar Chart -->\n    <div class=\"rv-header\">\n      <div class=\"rv-header-left\">\n        <h2 class=\"rv-title\">Reviews &amp; Ratings</h2>\n        <div class=\"rv-average-row\">\n          <!-- filled stars -->\n          <div class=\"rv-stars\">\n            <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                  d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                  fill=\"#eab308\" />\n              </svg>\n            </ng-container>\n          </div>\n          <span class=\"rv-avg-num\">{{responseData?.averageRating | number:'1.1-1'}}</span>\n          <span class=\"rv-avg-label\">average</span>\n        </div>\n        <div class=\"rv-count\" [style.color]=\"styles?.background?.accentColor || '#10b981'\">\n          {{responseData?.totalReviewCount | number}} Reviews\n        </div>\n      </div>\n\n      <div class=\"rv-bars\">\n        <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\n          <div class=\"rv-bar-row\">\n            <span class=\"rv-bar-label\">{{rating}}</span>\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                fill=\"#eab308\" />\n            </svg>\n            <div class=\"rv-bar-track\">\n              <div class=\"rv-bar-fill\" [style.width.%]=\"getPercentage(rating)\"></div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Review Cards Grid -->\n    <div class=\"rv-grid\">\n      <ng-container *ngFor=\"let review of reviewsData\">\n        <ng-container *ngIf=\"review.review\">\n          <div class=\"rv-card\">\n            <div class=\"rv-card-top\">\n              <div class=\"rv-reviewer\">\n                <img [src]=\"'https://ui-avatars.com/api/?name=' + (review?.userName ?? 'U') + '&background=random'\"\n                  class=\"rv-avatar\" alt=\"\">\n                <div class=\"rv-name-date\">\n                  <span class=\"rv-name\">{{review?.userName ?? 'Anonymous'}}</span>\n                  <span class=\"rv-date\">{{review?.createdAt | date:'d MMM y'}}</span>\n                </div>\n              </div>\n              <!-- Star rating -->\n              <div class=\"rv-card-stars\">\n                <ng-container *ngFor=\"let s of [1,2,3,4,5]\">\n                  <svg *ngIf=\"s <= review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                  <svg *ngIf=\"s > review.rating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\" style=\"opacity:0.25\">\n                    <path\n                      d=\"M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z\"\n                      fill=\"#eab308\" />\n                  </svg>\n                </ng-container>\n              </div>\n            </div>\n            <p class=\"rv-text\">{{review?.review ?? 'No comment provided.'}}</p>\n\n            <!-- Review Images -->\n            <div class=\"rv-images\" *ngIf=\"review?.reviewImages?.length\">\n              <a *ngFor=\"let img of review.reviewImages\" [href]=\"img.imgUrl\" target=\"_blank\" class=\"rv-img-link\">\n                <img [src]=\"img.imgUrl\" alt=\"Review image\" class=\"rv-img-thumb\" onerror=\"this.style.display='none'\">\n              </a>\n            </div>\n          </div>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"text-center mt-4\" *ngIf=\"(reviewsData?.length ?? 0) > 3\">\n      <button class=\"write-review-btn\" (click)=\"loadMoreReviews()\">Load More Reviews</button>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog modal-dialog-centered video-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-body\" style=\"height: 100%;\">\n        <video controls muted playsinline style=\"width: 100%; height: 100%;\">\n          <source\n            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\n            type=\"video/mp4\">\n          Your browser does not support the video tag.\n        </video>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\n  aria-hidden=\"true\">\n  <div class=\"modal-dialog review-modal\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h1 class=\"modal-title fs-5\"></h1>\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"detail-review-container\">\n          <div class=\"image-section\">\n            <div class=\"product-image\">\n              <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\n                *ngIf=\"currentImageIndex > 0\">\u25BC</div>\n              <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\n              <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\n                *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\n              <!-- <div class=\"earbuds-container\">\n                <div class=\"charging-case\"></div>\n                <div class=\"earbud left\"></div>\n                <div class=\"earbud right\"></div>\n              </div> -->\n            </div>\n            <!-- <div class=\"navigation-arrows\">\n            </div> -->\n          </div>\n\n          <div class=\"review-section\">\n            <div class=\"reviewer-header\">\n              <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\n              <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\n            </div>\n\n            <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\n              <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\n            </div>\n\n            <div class=\"review-date\">\n              Reviewed in India on 24 July 2025\n            </div>\n\n            <div class=\"review-text\">\n              {{selectedReview?.review ?? \"-\"}}\n            </div>\n\n            <div class=\"images-section\">\n              <h3>Images in this review</h3>\n              <div class=\"review-images\">\n                <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\n                  *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\n                  <img [src]=\"img.imgUrl\" alt=\"\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</div>", styles: [".product-desc{display:flex}::ng-deep .product-desc table,::ng-deep .brief-desc table{border-collapse:collapse;width:100%;margin:10px 0}::ng-deep .product-desc table td,::ng-deep .product-desc table th,::ng-deep .brief-desc table td,::ng-deep .brief-desc table th{border:1px solid #dddddd!important;text-align:left;padding:8px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th,.total-header td{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon,.favourite{border-radius:50%!important;height:30px;width:30px;padding:6px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9!important;cursor:pointer;transition:all .2s ease;border:none!important}:is(.share-icon,.favourite) mat-icon{font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.share-icon:hover,.favourite:hover{background-color:#e2e8f0!important;transform:scale(1.05)}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:8px;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}.item-img img{width:100%!important;height:100%!important;object-fit:cover}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.height{height:auto;overflow-y:visible}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.zoom:hover{transform:scale(1.04);transition:transform .2s ease-in-out;overflow:hidden}.product-heading{font-size:20px;font-weight:600;margin-top:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc{font-size:13px}.brief-desc{font-size:16px;margin-top:unset!important}.total-container{padding-top:10px!important;padding-bottom:4rem!important}.out-of-stock,.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.product-heading{font-size:23px;font-weight:600}.discount-price{font-size:1.7rem!important}.header-text{font-size:20px!important}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important;overflow:visible}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}}@media (min-width:1024px){.product-headig{font-size:35px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}@media (min-width: 1400px){.container{max-width:unset;width:95%;height:100vh;overflow-y:auto}}.width-max{width:max-content}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2;margin-bottom:.5rem!important}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:5px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:600;color:#111827;font-size:13px!important;padding:0!important;box-shadow:none!important;width:auto!important;white-space:nowrap}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:#111827;color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease;width:100%}.book-appointment-btn:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}@media (max-width: 480px){.container{display:flex;align-items:center;flex-direction:column}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.rv-section{padding:2rem 0;background:transparent}.rv-header{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem}.rv-header-left{flex:1}.rv-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:.75rem}.rv-average-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}.rv-stars{display:flex;gap:2px}.rv-avg-num{font-size:1.4rem;font-weight:700;color:#111827}.rv-avg-label{font-size:.95rem;color:#6b7280;font-weight:400}.rv-count{font-size:.9rem;font-weight:600}.rv-bars{flex:1;max-width:420px;display:flex;flex-direction:column;gap:6px}.rv-bar-row{display:flex;align-items:center;gap:3px}.rv-bar-label{font-size:15px;font-weight:600;color:#111827;width:10px;text-align:right;flex-shrink:0}.rv-bar-track{flex:1;height:10px;background-color:#f3f4f6;border-radius:3px;overflow:hidden}.rv-bar-fill{height:100%;background-color:#eab308;border-radius:3px}.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.rv-card{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}.rv-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.rv-reviewer{display:flex;align-items:center;gap:.7rem}.rv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.rv-name-date{display:flex;flex-direction:column;gap:2px}.rv-name{font-size:16px;font-weight:600;color:#374151}.rv-date{font-size:.75rem;color:#9ca3af}.rv-card-stars{display:flex;gap:2px;flex-shrink:0}.rv-text{font-size:.88rem;line-height:1.65;color:#4b5563;margin:0}.rv-images{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-img-link{display:block;flex-shrink:0;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.rv-img-thumb{width:72px;height:72px;object-fit:cover;display:block;transition:transform .2s ease}.rv-img-link:hover .rv-img-thumb{transform:scale(1.05)}@media (max-width: 768px){.rv-header{flex-direction:column;gap:1.5rem}.rv-bars{max-width:100%}.rv-grid{grid-template-columns:1fr}}.review-section{padding:4rem 1rem;border-top:1px solid #f3f4f6;margin-top:4rem;background:transparent!important}.review-summary-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4rem;gap:3rem}.rating-summary-left{flex:1}.rating-summary-left h2.reviews-header-title{font-size:1.75rem;font-weight:700;margin-bottom:0;color:#111827}.average-score-container{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.average-score{color:#111827;display:flex;align-items:baseline;gap:8px}.average-score .score-num{font-size:1.5rem;font-weight:700}.average-score .score-text{font-size:1.1rem;font-weight:400;color:#111827}.total-reviews-count{font-weight:600;font-size:1.1rem;display:block}.rating-distribution{flex:1;max-width:480px}.rating-bar-row{display:flex;align-items:center;gap:1.25rem;margin-bottom:.85rem}.star-label{display:flex;align-items:center;justify-content:flex-start;width:35px;line-height:1}.progress-bar-bg{flex:1;height:12px;background-color:#f3f4f6;border-radius:9999px;overflow:hidden}.progress-bar-fill{height:100%;background-color:#eab308;border-radius:9999px}.review-actions-bar-minimal{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.write-review-btn-minimal{padding:.6rem 1.25rem;background:#f8f9fa;color:#4b5563;border:none;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s}.write-review-btn-minimal:hover{background:#e5e7eb}.sort-dropdown-minimal select{padding:.6rem 2.25rem .6rem 1rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:.9rem;color:#4b5563;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;cursor:pointer}.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.review-card{padding:1.5rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:none}.review-divider{margin:2rem 0;border:none;border-top:1px solid #f3f4f6}.reviews-header-title{font-size:1.4rem;font-weight:700;color:#111827;margin-bottom:0}.review-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.reviewer-info{display:flex;align-items:center;gap:1rem}.reviewer-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#f3f4f6}.reviewer-name{font-weight:600;font-size:.95rem;color:#374151}.review-date-text{font-size:.8rem;color:#9ca3af}.reviewer-name-date{display:flex;flex-direction:row;align-items:center;gap:8px}.review-card-rating{display:flex;gap:2px}.review-card-text{font-size:1rem;line-height:1.7;color:#4b5563}.product-tabs-container{border-bottom:1px solid #f3f4f6;margin-bottom:8px}.tab-item{padding:1rem 0;font-weight:600;font-size:1.1rem;color:#6b7280;cursor:pointer;position:relative;transition:color .2s}.tab-content-pane h3{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.tab-content-pane p{color:#4b5563;line-height:1.8;font-size:1.05rem}@media (max-width: 1024px){.reviews-grid{grid-template-columns:1fr}}@media (max-width: 768px){.review-summary-header{flex-direction:column;gap:2rem}.rating-distribution{max-width:100%}.bento-grid{height:auto;display:flex;flex-direction:column}.tabs-list{gap:1.5rem;overflow-x:auto}}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}.breadcrumbs-modern{font-size:.85rem;color:#6b7280;margin-bottom:.5rem}.breadcrumb-item.active{color:#111827;font-weight:500}.product-title-modern{font-size:2rem;font-weight:800;color:#111827;margin:0;line-height:1.2;font-family:var(--website-font-family)}.product-price-modern{font-size:1.75rem;font-weight:700;color:#111827;font-family:var(--website-font-family)}.rating-line-modern{margin-top:.25rem}.rating-score-text{font-weight:700;font-size:1rem;color:#111827}.rating-count-text{font-size:.95rem;color:#10b981;font-weight:600;cursor:pointer}.product-description-brief{font-size:1rem;line-height:1.7;color:#4b5563;margin-top:1.5rem}.low-stock-text{color:#dc2626;font-weight:700;font-size:.875rem}.variants-modern-container{margin:2.5rem 0}.varient-key{font-size:.9rem;font-weight:800;color:#111827;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.color-swatch-modern{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid white;box-shadow:0 0 0 1px #e5e7eb;transition:all .25s cubic-bezier(.4,0,.2,1)}.color-swatch-modern:hover{transform:scale(1.15)}.color-swatch-modern.active{box-shadow:0 0 0 2px #111827}.box-varient-modern{padding:.75rem 1.5rem;border:2px solid #f3f4f6;border-radius:10px;font-size:.95rem;font-weight:700;color:#374151;cursor:pointer;transition:all .2s;min-width:70px;text-align:center;background:#fff}.box-varient-modern:hover{border-color:#d1d5db;background:#f9fafb}.box-varient-modern.active{border-color:#111827;background:#111827;color:#fff}.quantity-container{margin-top:1rem}.quantity-selector-modern{border:1px solid #e5e7eb;border-radius:12px;width:fit-content;background:#f9fafb;padding:2px}.qty-btn{width:44px;height:44px;border:none;background:transparent;font-size:1.5rem;color:#111827;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-radius:10px}.qty-btn:hover:not(:disabled){background:#fff;box-shadow:0 2px 4px #0000000d}.qty-btn:disabled{color:#d1d5db;cursor:not-allowed}.qty-display{width:50px;text-align:center;font-weight:700;color:#111827;font-size:1.1rem}.out-of-stock-modern{background:#f3f4f6;color:#9ca3af;padding:1.1rem 2.5rem;border:none;border-radius:14px;font-weight:800;font-size:1.1rem;cursor:not-allowed}.wishlist-btn-modern{width:56px;height:56px;border:2px solid #f3f4f6;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:#fff}.wishlist-btn-modern:hover{background:#fef2f2;border-color:#fecaca}.wishlist-btn-modern mat-icon{font-size:26px}.thumbnail-column{padding-right:15px!important}.thumbnail-list::-webkit-scrollbar{display:none}.thumbnail-list{-ms-overflow-style:none;scrollbar-width:none}.image-section-modern{padding-right:2.5rem!important;padding-left:0!important;width:60%!important;max-width:60%!important;flex:0 0 60%!important;margin-top:0!important}.detail-section-modern{padding-left:.5rem!important;padding-right:0!important;width:40%!important;max-width:40%!important;flex:0 0 40%!important;margin-top:0!important}.thumbnail-column{width:90px!important;flex:0 0 90px!important}.item-img{width:100%!important;max-width:100%;margin:0;border-radius:20px;overflow:hidden;background:#f9fafb;position:relative}lib-ngx-image-zoom{width:100%!important;display:block!important}::ng-deep .ngx-image-zoom-container{width:100%!important;height:auto!important;aspect-ratio:1/1}.style-1-vertical{display:flex;flex-direction:column;width:100%}.main-image-container{width:100%;aspect-ratio:1 / 1}.thumbnail-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.thumbnail-img{min-width:80px;width:80px;height:80px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:border-color .2s}.active-thumb{border-width:2px;border-style:solid}.bento-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:15px;width:100%;aspect-ratio:5/4}.bento-item-large{grid-row:span 2;border-radius:24px;overflow:hidden}.bento-item-small{border-radius:20px;overflow:hidden}.bento-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.bento-grid img:hover{transform:scale(1.05)}@media (max-width: 991px){.image-section-modern,.detail-section-modern{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important}.bento-grid{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}.bento-item-large{grid-row:span 1}}.bento-masonry-container{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;width:100%}.bento-item-modern{border-radius:16px;overflow:hidden;background:#fdfdfd;aspect-ratio:1 / 1;transition:all .4s cubic-bezier(.4,0,.2,1)}.bento-img-modern{width:100%;height:100%;display:block;object-fit:cover;background:#fdfdfd;cursor:pointer;transition:transform .6s ease}.bento-item-modern:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.bento-item-modern:hover .bento-img-modern{transform:scale(1.03)}.detail-section-modern{position:sticky;top:0;height:max-content;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden;padding-left:2rem!important;scrollbar-width:none}.detail-section-modern::-webkit-scrollbar{display:none}.product-hero-card-modern{border:none;box-shadow:none;z-index:10;position:relative}.tabs-list{display:flex;justify-content:flex-start;gap:10px;list-style:none;padding:0;margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.tabs-list::-webkit-scrollbar{display:none}.tab-item{font-size:1rem;font-weight:600;color:#6b7280;padding:.5rem 1rem;border-radius:0;cursor:pointer;transition:all .25s;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}.tab-item:hover{background:transparent;color:#111827}.tab-content-pane{padding-top:.5rem}@media (max-width: 1024px){.product-hero-card-modern{padding:25px}.tab-content-pane{width:100%}}@media (max-width: 991px){.bento-masonry-container{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item-modern.featured{grid-row:span 1;aspect-ratio:1 / 1}.product-hero-card-modern{position:static;padding:0;box-shadow:none;border:none;background:transparent;z-index:auto}.detail-section-modern{padding-left:0!important;margin-top:2rem;position:static!important;max-height:none!important;height:auto!important;overflow-y:visible!important;overflow-x:visible!important}.image-section-modern{padding-right:0!important}.tab-item{padding:.6rem 1rem;font-size:.95rem}.product-tabs-container{padding:0 4px}}.product-info-minimal{display:flex;flex-direction:column}.breadcrumbs-modern{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#6b7280;font-weight:500}.breadcrumbs-modern .dot{font-size:1.2rem;line-height:1}.title-price-row-modern{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.product-title-modern{font-size:1.5rem;font-weight:800;color:#111827;margin:0;line-height:1.2}.product-price-modern{font-size:1.5rem;font-weight:500;color:#111827;white-space:nowrap}.rating-row-modern{display:flex;align-items:center;gap:12px;font-size:1rem;flex-wrap:wrap}.rating-score{font-weight:700;color:#111827}.separator{color:#e5e7eb}.reviews-link{font-weight:600}::ng-deep .rating-row-modern p-rating .p-rating-icon.p-rating-icon-active svg,::ng-deep .rating-row-modern p-rating .p-icon{color:#eab308!important;fill:#eab308!important}::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) svg,::ng-deep .rating-row-modern p-rating .p-rating-icon:not(.p-rating-icon-active) .p-icon{color:#eab308!important;fill:#eab308!important;opacity:.25}.product-brief-modern{font-size:.95rem;line-height:1.7;color:#4b5563;margin-top:.5rem;text-align:justify}.write-review-btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.75rem;background:#f8f9fa;color:#374151;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.02em}.write-review-btn:hover{background:#f1f3f5;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 8px #00000012}@media (max-width: 991px){.product-title-modern,.product-price-modern{font-size:1.3rem}}@media (max-width: 480px){.title-price-row-modern{flex-direction:column;gap:4px}.product-title-modern{font-size:1.2rem}.product-price-modern{font-size:1.2rem;white-space:normal}.rv-section{padding:1rem 0}.rv-header{gap:1rem}.rv-title{font-size:1.15rem;margin-bottom:.5rem}.rv-avg-num{font-size:1.15rem}.rv-bars{max-width:100%;width:100%}.rv-grid{grid-template-columns:1fr;gap:.75rem}.rv-card{padding:10px}.rv-name{font-size:14px}.tabs-list{gap:0}.tab-item{padding:.55rem 1rem;font-size:.9rem}.header-text{font-size:15px!important}.product-header{flex-wrap:wrap;gap:8px}.pricebreakup-btn{font-size:10px;padding:6px}.write-review-btn{width:100%;padding:.65rem 1rem}}.pb-glass-container{padding:16px;border-radius:16px}.pb-glass-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.85);border-radius:12px;margin-bottom:12px;overflow:hidden}.pb-glass-header{padding:10px 16px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.pb-glass-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:14px;border-bottom:1px solid rgba(0,0,0,.04)}.pb-glass-row:last-child{border-bottom:none}.pb-glass-row:nth-child(2n){background:#f8fafc99}.pb-label{color:#6b7280;font-weight:500}.pb-value{font-weight:600;color:#1f2937}.pb-summary-card{background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(203,213,225,.5);border-radius:12px;overflow:hidden}.pb-summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;color:#374151;border-bottom:1px solid rgba(0,0,0,.05)}.pb-grand-total{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:16px;letter-spacing:.5px}.item-code-row{margin-bottom:6px}.item-code-value{display:inline-block;padding:2px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border:1px solid #e2e8f0}.buy-now-btn{background:transparent!important;border:1.5px solid currentColor!important;color:inherit!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -26086,6 +26102,53 @@ class BookAppointmentComponent extends BaseSection {
         this.weekDays = [];
         this.instructions = '';
         this.reviewRows = [];
+        // Sub-step navigation within step === 'form' - Date/Time/Details shown one at a time, each
+        // locked until its prerequisite is met, matching the prototype's singleSub/subSteps pattern.
+        this.subStep = 'date';
+    }
+    get subSteps() {
+        return [
+            { key: 'date', label: 'Date', locked: false },
+            { key: 'time', label: 'Time', locked: !this.selectedDateStr },
+            { key: 'details', label: 'Details', locked: !this.selectedSlot },
+        ].map((s, i) => ({
+            ...s,
+            num: i + 1,
+            active: this.subStep === s.key,
+            go: () => { if (!s.locked)
+                this.subStep = s.key; }
+        }));
+    }
+    get subBackOff() {
+        return this.subStep === 'date';
+    }
+    get subNextOff() {
+        if (this.subStep === 'date')
+            return !this.selectedDateStr;
+        if (this.subStep === 'time')
+            return !this.selectedSlot;
+        return true; // 'details' has no Next - Review Booking in the right panel takes over
+    }
+    // Bound as [ngForTrackBy] on the sub-step tabs - subSteps is a getter that returns brand-new
+    // object instances on every change-detection pass, so without a trackBy, NgForOf (which diffs
+    // by identity) tears down and recreates all 3 <button> elements on every CD tick. A native
+    // click needs mousedown/mouseup on the SAME element; if a tick lands between them (very likely
+    // - hover, other zone.js-patched events) the button is swapped mid-click and no click fires.
+    trackBySubStepKey(_, s) {
+        return s.key;
+    }
+    subBack() {
+        this.subStep = this.subStep === 'details' ? 'time' : 'date';
+    }
+    subNext() {
+        this.subStep = this.subStep === 'date' ? 'time' : 'details';
+    }
+    get subChosenLabel() {
+        if (this.selectedSlot)
+            return `${this.selectedDateStr} · ${this.selectedSlot.value}`;
+        if (this.selectedDateStr)
+            return `${this.selectedDateStr} · pick a time`;
+        return 'Pick a date to continue';
     }
     get bannerTitle() {
         return this.mode === 'HOME_VISIT' ? 'Try at Home Service' : 'Live Video Call';
@@ -26261,6 +26324,7 @@ class BookAppointmentComponent extends BaseSection {
             this.slots = (res || []).map((v) => ({ selected: false, value: v }));
             this.slotsLoading = false;
             this.loading = false;
+            this.subStep = 'time';
         }, () => {
             this.slotsLoading = false;
             this.loading = false;
@@ -26270,6 +26334,7 @@ class BookAppointmentComponent extends BaseSection {
         this.slots.forEach((s) => s.selected = false);
         slot.selected = true;
         this.selectedSlot = slot;
+        this.subStep = 'details';
     }
     invalid() {
         const addressOk = this.mode !== 'HOME_VISIT' || !!this.defaultAddress;
@@ -26362,11 +26427,11 @@ class BookAppointmentComponent extends BaseSection {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: i2$2.Router }, { token: RestService }, { token: EventsService }, { token: i6$1.MessageService }, { token: StorageServiceService }, { token: BookingProductCartService }, { token: i3$2.MatDialog }], 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\"\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div class=\"main_header\">\n        <div class=\"header d-flex justify-content-between align-items-center\">\n            <div class=\"header-title\">\n                <h1>{{bannerTitle}}</h1>\n                <p>{{bannerDesc}}</p>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"main_body w-100 d-flex justify-content-center\">\n        <div class=\"wiz-container\">\n\n            <div class=\"step-indicator\" *ngIf=\"step !== 'done'\">\n                <div class=\"step-dot\" [class.active]=\"true\">1</div>\n                <div class=\"step-label\" [class.active]=\"step==='form'\">Date, time &amp; details</div>\n                <div class=\"step-divider\"></div>\n                <div class=\"step-dot\" [class.active]=\"step==='review'\">2</div>\n                <div class=\"step-label\" [class.active]=\"step==='review'\">Review &amp; confirm</div>\n            </div>\n\n            <ng-container *ngIf=\"step === 'form'\">\n                <div class=\"single-grid\">\n                    <div class=\"single-left\">\n\n                        <div class=\"section-card card\">\n                            <div class=\"week-header\">\n                                <div>\n                                    <h3 class=\"section-title mb-0\">Select a Date</h3>\n                                    <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n                                </div>\n                                <div class=\"week-arrows\">\n                                    <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n                                        <mat-icon>chevron_left</mat-icon>\n                                    </button>\n                                    <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n                                        <mat-icon>chevron_right</mat-icon>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"week-strip\">\n                                <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n                                    (click)=\"pickDay(d)\">\n                                    <div class=\"week-day-dow\">{{d.dow}}</div>\n                                    <div class=\"week-day-num\">{{d.num}}</div>\n                                </button>\n                            </div>\n                        </div>\n\n                        <div class=\"section-card card\">\n                            <h3 class=\"section-title mb-0\">Select a Time</h3>\n                            <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n                            <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n                            <div class=\"row g-2 overflow-scroll\" *ngIf=\"selectedDateStr\">\n                                <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n                                    <div class=\"col-4\" *ngFor=\"let time of slots\">\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n                                            (click)=\"selectSlot(time)\">{{time?.value}}</div>\n                                    </div>\n                                    <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n                                </ng-container>\n                                <ng-template #slotsLoadingTpl>\n                                    <p class=\"mb-0\">Loading available times...</p>\n                                </ng-template>\n                            </div>\n                        </div>\n\n                        <div class=\"section-card card\">\n                            <h3 class=\"section-title\">Booking Details</h3>\n                            <div class=\"booking-for-line\">\n                                Booking for <strong>{{userDetails?.contact?.name}}</strong>\n                                <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n                                <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n                            </div>\n\n                            <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n                                <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\n                                <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n                                    <div class=\"address-info\">\n                                        <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n                                        <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n                                            {{defaultAddress?.stateName}}</div>\n                                        <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n                                    </div>\n                                </div>\n                                <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n                                    CHANGE OR ADD ADDRESS\n                                </button>\n\n                                <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n                                    <mat-icon>add</mat-icon>\n                                    <span class=\"ms-2\">Add an address</span>\n                                </div>\n\n                                <div class=\"mb-0 mt-3\">\n                                    <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n                                    <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </div>\n\n                    <div class=\"single-right section-card card\">\n                        <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n                        <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n                            <div class=\"design-thumb\"></div>\n                            <div class=\"design-info\">\n                                <div class=\"design-name\">{{it.itemName}}</div>\n                                <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n                            </div>\n                        </div>\n                        <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n                        <div class=\"summary-divider\"></div>\n\n                        <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n                            <div class=\"summary-label\">Service:</div>\n                            <div class=\"free-label\">FREE</div>\n                        </div>\n                        <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n                            <div class=\"summary-label\">Home visit charge</div>\n                            <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n                        </div>\n\n                        <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n                        <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'review'\">\n                <div class=\"review-card card\">\n                    <div class=\"review-header\">Review your booking</div>\n                    <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n                        <div class=\"review-k\">{{rc.k}}</div>\n                        <div class=\"review-v\">{{rc.v}}</div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'done'\">\n                <div class=\"booking-confirmation\">\n                    <div class=\"success-icon\">\n                        <div class=\"checkmark-circle\">\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n                                class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n                                class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n                        </div>\n                    </div>\n\n                    <div class=\"confirmation-content\">\n                        <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n                        <p class=\"confirmation-message\">\n                            {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book your appointment. Please\n                            try again later'}}\n                        </p>\n\n                        <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n                            <div class=\"details-card\">\n                                <h3 class=\"details-title\">Your Video Call Link</h3>\n                                <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n                            </div>\n                        </div>\n\n                        <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                            <div class=\"details-card\">\n                                <h3 class=\"details-title\">Appointment Details</h3>\n                                <div class=\"details-row\">\n                                    <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n                                    <span class=\"detail-value\">{{selectedDateStr}} at {{selectedSlot?.value ?? 'N/A'}}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                            <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n                            <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"step === 'review'\">\n        <div class=\"footer-buttons\" style=\"justify-content:space-between\">\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"backToForm()\">Back</span>\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center complete_booking\"\n                (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n                {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n            </button>\n        </div>\n    </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.9rem;font-weight:600;color:var(--slate-800)!important;padding:.75rem .5rem;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.step-indicator{display:flex;align-items:center;gap:10px;padding-bottom:18px}.step-dot{width:26px;height:26px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-dot.active{background:var(--color-accent-gradient);color:#fff!important}.step-label{font-size:12.5px;color:var(--slate-400)!important;font-weight:600}.step-label.active{color:var(--slate-900)!important}.step-divider{width:40px;height:1px;background:var(--slate-200)}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-card{max-width:560px;margin:0 auto;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 475px){.single-grid{grid-template-columns:1fr}.single-right{position:static}.week-strip{gap:6px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }] }); }
+    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\"\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div class=\"main_body w-100 d-flex justify-content-center\">\n        <div class=\"wiz-container\">\n\n            <ng-container *ngIf=\"step === 'form'\">\n                <div class=\"single-grid\">\n                    <div class=\"single-left\">\n\n                        <div class=\"wizard-banner\" [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n                            <div class=\"wizard-banner-title\">{{bannerTitle}}</div>\n                            <div class=\"wizard-banner-desc\">{{bannerDesc}}</div>\n                        </div>\n\n                        <div class=\"sub-step-tabs\">\n                            <button type=\"button\" class=\"sub-step-tab\" *ngFor=\"let s of subSteps; trackBy: trackBySubStepKey\"\n                                [class.active]=\"s.active\" [class.locked]=\"s.locked\" [disabled]=\"s.locked\" (click)=\"s.go()\">\n                                <span class=\"sub-step-dot\">{{s.num}}</span>\n                                {{s.label}}\n                            </button>\n                        </div>\n\n                        <div class=\"sub-step-content\">\n                            <ng-container *ngIf=\"subStep === 'date'\">\n                                <div class=\"section-card card\">\n                                    <div class=\"week-header\">\n                                        <div>\n                                            <h3 class=\"section-title mb-0\">Select a Date</h3>\n                                            <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n                                        </div>\n                                        <div class=\"week-arrows\">\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n                                                <mat-icon>chevron_left</mat-icon>\n                                            </button>\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n                                                <mat-icon>chevron_right</mat-icon>\n                                            </button>\n                                        </div>\n                                    </div>\n                                    <div class=\"week-strip\">\n                                        <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n                                            (click)=\"pickDay(d)\">\n                                            <div class=\"week-day-dow\">{{d.dow}}</div>\n                                            <div class=\"week-day-num\">{{d.num}}</div>\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'time'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title mb-0\">Select a Time</h3>\n                                    <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n                                    <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n                                    <div class=\"time-slot-grid overflow-scroll\" *ngIf=\"selectedDateStr\">\n                                        <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n                                            <div class=\"time-slot rounded-2\" *ngFor=\"let time of slots\" [class.selected]=\"time.selected\"\n                                                (click)=\"selectSlot(time)\">{{time?.value}}</div>\n                                            <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n                                        </ng-container>\n                                        <ng-template #slotsLoadingTpl>\n                                            <p class=\"mb-0\">Loading available times...</p>\n                                        </ng-template>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'details'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title\">Booking Details</h3>\n                                    <div class=\"booking-for-line\">\n                                        Booking for <strong>{{userDetails?.contact?.name}}</strong>\n                                        <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n                                        <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n                                    </div>\n\n                                    <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n                                        <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\n                                        <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n                                            <div class=\"address-info\">\n                                                <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n                                                <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n                                                    {{defaultAddress?.stateName}}</div>\n                                                <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n                                            </div>\n                                        </div>\n                                        <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n                                            CHANGE OR ADD ADDRESS\n                                        </button>\n\n                                        <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n                                            <mat-icon>add</mat-icon>\n                                            <span class=\"ms-2\">Add an address</span>\n                                        </div>\n\n                                        <div class=\"mb-0 mt-3\">\n                                            <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n                                            <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </div>\n\n                        <div class=\"sub-step-footer\">\n                            <button type=\"button\" class=\"sub-back-btn\" [disabled]=\"subBackOff\" (click)=\"subBack()\">Back</button>\n                            <div class=\"sub-chosen-label\">{{subChosenLabel}}</div>\n                            <button type=\"button\" class=\"sub-next-btn\" *ngIf=\"subStep !== 'details'\" [disabled]=\"subNextOff\" (click)=\"subNext()\">Next</button>\n                        </div>\n                    </div>\n\n                    <div class=\"single-right section-card card\">\n                        <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n                        <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n                            <div class=\"design-thumb\"></div>\n                            <div class=\"design-info\">\n                                <div class=\"design-name\">{{it.itemName}}</div>\n                                <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n                            </div>\n                        </div>\n                        <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n                        <div class=\"summary-divider\"></div>\n\n                        <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n                            <div class=\"summary-label\">Service:</div>\n                            <div class=\"free-label\">FREE</div>\n                        </div>\n                        <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n                            <div class=\"summary-label\">Home visit charge</div>\n                            <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n                        </div>\n\n                        <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n                        <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'review'\">\n                <div class=\"review-card card\">\n                    <div class=\"review-header\">Review your booking</div>\n                    <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n                        <div class=\"review-k\">{{rc.k}}</div>\n                        <div class=\"review-v\">{{rc.v}}</div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'done'\">\n                <div class=\"booking-confirmation\">\n                    <div class=\"success-icon\">\n                        <div class=\"checkmark-circle\">\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n                                class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n                                class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n                        </div>\n                    </div>\n\n                    <div class=\"confirmation-content\">\n                        <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n                        <p class=\"confirmation-message\">\n                            {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book your appointment. Please\n                            try again later'}}\n                        </p>\n\n                        <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n                            <div class=\"details-card\">\n                                <h3 class=\"details-title\">Your Video Call Link</h3>\n                                <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n                            </div>\n                        </div>\n\n                        <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                            <div class=\"details-card\">\n                                <h3 class=\"details-title\">Appointment Details</h3>\n                                <div class=\"details-row\">\n                                    <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n                                    <span class=\"detail-value\">{{selectedDateStr}} at {{selectedSlot?.value ?? 'N/A'}}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                            <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n                            <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"step === 'review'\">\n        <div class=\"footer-buttons\" style=\"justify-content:space-between\">\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"backToForm()\">Back</span>\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center complete_booking\"\n                (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n                {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n            </button>\n        </div>\n    </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.75rem;font-weight:600;color:var(--slate-800)!important;height:34px;padding:0 4px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.wizard-banner{border-radius:var(--border-radius-lg);padding:1.125rem 1.5rem;background:var(--color-accent-gradient);box-shadow:var(--shadow-sm)}.wizard-banner-title{font-size:1.1rem;font-weight:700;color:#fff!important}.wizard-banner-desc{font-size:.85rem;line-height:1.5;color:#ffffffd9!important;padding-top:.2rem;max-width:520px}.sub-step-tabs{display:flex;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.sub-step-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:#fff;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--slate-500)!important;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition-smooth)}.sub-step-tab.active{color:var(--slate-900)!important;border-bottom-color:var(--color-primary);background:var(--slate-50)}.sub-step-tab.locked{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-dot{width:20px;height:20px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sub-step-tab.active .sub-step-dot{background:var(--color-accent-gradient);color:#fff!important}.sub-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.85rem 1.25rem;box-shadow:var(--shadow-sm)}.sub-back-btn{height:40px;font-size:.85rem;font-weight:600;color:var(--slate-600)!important;background:none;border:1.5px solid var(--slate-200);padding:0 18px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);flex-shrink:0}.sub-back-btn:hover:not(:disabled){color:var(--slate-900)!important;background-color:var(--slate-100)}.sub-back-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.sub-chosen-label{font-size:.8rem;color:var(--slate-500)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sub-next-btn{height:40px;background:var(--color-accent-gradient);color:#fff!important;border:none;padding:0 22px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);flex-shrink:0}.sub-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.sub-next-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-card{max-width:560px;margin:0 auto;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 900px){.single-grid{grid-template-columns:1fr}.single-right{position:static}}@media screen and (max-width: 475px){.week-strip{gap:6px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-book-appointment', standalone: true, imports: [CommonModule, MatIcon, MatIconModule, FormsModule, MatDialogModule, ToastModule, HoverDirective, HoverElementsComponent, BackgroundDirective], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div class=\"main_header\">\n        <div class=\"header d-flex justify-content-between align-items-center\">\n            <div class=\"header-title\">\n                <h1>{{bannerTitle}}</h1>\n                <p>{{bannerDesc}}</p>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"main_body w-100 d-flex justify-content-center\">\n        <div class=\"wiz-container\">\n\n            <div class=\"step-indicator\" *ngIf=\"step !== 'done'\">\n                <div class=\"step-dot\" [class.active]=\"true\">1</div>\n                <div class=\"step-label\" [class.active]=\"step==='form'\">Date, time &amp; details</div>\n                <div class=\"step-divider\"></div>\n                <div class=\"step-dot\" [class.active]=\"step==='review'\">2</div>\n                <div class=\"step-label\" [class.active]=\"step==='review'\">Review &amp; confirm</div>\n            </div>\n\n            <ng-container *ngIf=\"step === 'form'\">\n                <div class=\"single-grid\">\n                    <div class=\"single-left\">\n\n                        <div class=\"section-card card\">\n                            <div class=\"week-header\">\n                                <div>\n                                    <h3 class=\"section-title mb-0\">Select a Date</h3>\n                                    <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n                                </div>\n                                <div class=\"week-arrows\">\n                                    <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n                                        <mat-icon>chevron_left</mat-icon>\n                                    </button>\n                                    <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n                                        <mat-icon>chevron_right</mat-icon>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"week-strip\">\n                                <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n                                    (click)=\"pickDay(d)\">\n                                    <div class=\"week-day-dow\">{{d.dow}}</div>\n                                    <div class=\"week-day-num\">{{d.num}}</div>\n                                </button>\n                            </div>\n                        </div>\n\n                        <div class=\"section-card card\">\n                            <h3 class=\"section-title mb-0\">Select a Time</h3>\n                            <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n                            <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n                            <div class=\"row g-2 overflow-scroll\" *ngIf=\"selectedDateStr\">\n                                <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n                                    <div class=\"col-4\" *ngFor=\"let time of slots\">\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\n                                            (click)=\"selectSlot(time)\">{{time?.value}}</div>\n                                    </div>\n                                    <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n                                </ng-container>\n                                <ng-template #slotsLoadingTpl>\n                                    <p class=\"mb-0\">Loading available times...</p>\n                                </ng-template>\n                            </div>\n                        </div>\n\n                        <div class=\"section-card card\">\n                            <h3 class=\"section-title\">Booking Details</h3>\n                            <div class=\"booking-for-line\">\n                                Booking for <strong>{{userDetails?.contact?.name}}</strong>\n                                <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n                                <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n                            </div>\n\n                            <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n                                <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\n                                <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n                                    <div class=\"address-info\">\n                                        <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n                                        <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n                                            {{defaultAddress?.stateName}}</div>\n                                        <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n                                    </div>\n                                </div>\n                                <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n                                    CHANGE OR ADD ADDRESS\n                                </button>\n\n                                <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n                                    <mat-icon>add</mat-icon>\n                                    <span class=\"ms-2\">Add an address</span>\n                                </div>\n\n                                <div class=\"mb-0 mt-3\">\n                                    <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n                                    <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n                                </div>\n                            </ng-container>\n                        </div>\n                    </div>\n\n                    <div class=\"single-right section-card card\">\n                        <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n                        <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n                            <div class=\"design-thumb\"></div>\n                            <div class=\"design-info\">\n                                <div class=\"design-name\">{{it.itemName}}</div>\n                                <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n                            </div>\n                        </div>\n                        <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n                        <div class=\"summary-divider\"></div>\n\n                        <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n                            <div class=\"summary-label\">Service:</div>\n                            <div class=\"free-label\">FREE</div>\n                        </div>\n                        <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n                            <div class=\"summary-label\">Home visit charge</div>\n                            <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n                        </div>\n\n                        <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n                        <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'review'\">\n                <div class=\"review-card card\">\n                    <div class=\"review-header\">Review your booking</div>\n                    <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n                        <div class=\"review-k\">{{rc.k}}</div>\n                        <div class=\"review-v\">{{rc.v}}</div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'done'\">\n                <div class=\"booking-confirmation\">\n                    <div class=\"success-icon\">\n                        <div class=\"checkmark-circle\">\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n                                class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n                                class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n                        </div>\n                    </div>\n\n                    <div class=\"confirmation-content\">\n                        <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n                        <p class=\"confirmation-message\">\n                            {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book your appointment. Please\n                            try again later'}}\n                        </p>\n\n                        <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n                            <div class=\"details-card\">\n                                <h3 class=\"details-title\">Your Video Call Link</h3>\n                                <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n                            </div>\n                        </div>\n\n                        <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                            <div class=\"details-card\">\n                                <h3 class=\"details-title\">Appointment Details</h3>\n                                <div class=\"details-row\">\n                                    <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n                                    <span class=\"detail-value\">{{selectedDateStr}} at {{selectedSlot?.value ?? 'N/A'}}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                            <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n                            <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"step === 'review'\">\n        <div class=\"footer-buttons\" style=\"justify-content:space-between\">\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"backToForm()\">Back</span>\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center complete_booking\"\n                (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n                {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n            </button>\n        </div>\n    </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.9rem;font-weight:600;color:var(--slate-800)!important;padding:.75rem .5rem;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.step-indicator{display:flex;align-items:center;gap:10px;padding-bottom:18px}.step-dot{width:26px;height:26px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-dot.active{background:var(--color-accent-gradient);color:#fff!important}.step-label{font-size:12.5px;color:var(--slate-400)!important;font-weight:600}.step-label.active{color:var(--slate-900)!important}.step-divider{width:40px;height:1px;background:var(--slate-200)}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-card{max-width:560px;margin:0 auto;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 475px){.single-grid{grid-template-columns:1fr}.single-right{position:static}.week-strip{gap:6px}}\n"] }]
+            args: [{ selector: 'simpo-book-appointment', standalone: true, imports: [CommonModule, MatIcon, MatIconModule, FormsModule, MatDialogModule, ToastModule, HoverDirective, HoverElementsComponent, BackgroundDirective], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"main_section\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div class=\"main_body w-100 d-flex justify-content-center\">\n        <div class=\"wiz-container\">\n\n            <ng-container *ngIf=\"step === 'form'\">\n                <div class=\"single-grid\">\n                    <div class=\"single-left\">\n\n                        <div class=\"wizard-banner\" [simpoBackground]=\"backgroundInfo\" [style.--color-accent-gradient]=\"accentColor\">\n                            <div class=\"wizard-banner-title\">{{bannerTitle}}</div>\n                            <div class=\"wizard-banner-desc\">{{bannerDesc}}</div>\n                        </div>\n\n                        <div class=\"sub-step-tabs\">\n                            <button type=\"button\" class=\"sub-step-tab\" *ngFor=\"let s of subSteps; trackBy: trackBySubStepKey\"\n                                [class.active]=\"s.active\" [class.locked]=\"s.locked\" [disabled]=\"s.locked\" (click)=\"s.go()\">\n                                <span class=\"sub-step-dot\">{{s.num}}</span>\n                                {{s.label}}\n                            </button>\n                        </div>\n\n                        <div class=\"sub-step-content\">\n                            <ng-container *ngIf=\"subStep === 'date'\">\n                                <div class=\"section-card card\">\n                                    <div class=\"week-header\">\n                                        <div>\n                                            <h3 class=\"section-title mb-0\">Select a Date</h3>\n                                            <p class=\"subtitle mb-0\">{{weekRangeLabel}}</p>\n                                        </div>\n                                        <div class=\"week-arrows\">\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"prevWeek()\" [disabled]=\"weekOffset <= 0\">\n                                                <mat-icon>chevron_left</mat-icon>\n                                            </button>\n                                            <button type=\"button\" class=\"week-arrow-btn\" (click)=\"nextWeek()\" [disabled]=\"weekOffset >= maxWeekOffset\">\n                                                <mat-icon>chevron_right</mat-icon>\n                                            </button>\n                                        </div>\n                                    </div>\n                                    <div class=\"week-strip\">\n                                        <button type=\"button\" class=\"week-day\" *ngFor=\"let d of weekDays\" [class.selected]=\"d.selected\"\n                                            (click)=\"pickDay(d)\">\n                                            <div class=\"week-day-dow\">{{d.dow}}</div>\n                                            <div class=\"week-day-num\">{{d.num}}</div>\n                                        </button>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'time'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title mb-0\">Select a Time</h3>\n                                    <p class=\"subtitle\" *ngIf=\"selectedDateStr\">Available slots for {{selectedDateStr}}</p>\n                                    <p class=\"subtitle mb-0\" *ngIf=\"!selectedDateStr\">Pick a date to see available times.</p>\n                                    <div class=\"time-slot-grid overflow-scroll\" *ngIf=\"selectedDateStr\">\n                                        <ng-container *ngIf=\"!slotsLoading; else slotsLoadingTpl\">\n                                            <div class=\"time-slot rounded-2\" *ngFor=\"let time of slots\" [class.selected]=\"time.selected\"\n                                                (click)=\"selectSlot(time)\">{{time?.value}}</div>\n                                            <p class=\"mb-0\" *ngIf=\"slots.length === 0\">No slots available for this date.</p>\n                                        </ng-container>\n                                        <ng-template #slotsLoadingTpl>\n                                            <p class=\"mb-0\">Loading available times...</p>\n                                        </ng-template>\n                                    </div>\n                                </div>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"subStep === 'details'\">\n                                <div class=\"section-card card\">\n                                    <h3 class=\"section-title\">Booking Details</h3>\n                                    <div class=\"booking-for-line\">\n                                        Booking for <strong>{{userDetails?.contact?.name}}</strong>\n                                        <ng-container *ngIf=\"userDetails?.contact?.mobile\"> \u00B7 {{userDetails?.contact?.mobile}}</ng-container>\n                                        <ng-container *ngIf=\"userDetails?.contact?.email\"> \u00B7 {{userDetails?.contact?.email}}</ng-container>\n                                    </div>\n\n                                    <ng-container *ngIf=\"mode === 'HOME_VISIT'\">\n                                        <p class=\"policies-title mt-3 mb-2\" style=\"font-size:1rem;\">Shipping Address</p>\n\n                                        <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n                                            <div class=\"address-info\">\n                                                <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n                                                <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n                                                    {{defaultAddress?.stateName}}</div>\n                                                <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n                                            </div>\n                                        </div>\n                                        <button type=\"button\" class=\"change-address-btn w-100\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">\n                                            CHANGE OR ADD ADDRESS\n                                        </button>\n\n                                        <div class=\"addLinks\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n                                            <mat-icon>add</mat-icon>\n                                            <span class=\"ms-2\">Add an address</span>\n                                        </div>\n\n                                        <div class=\"mb-0 mt-3\">\n                                            <label class=\"form-label d-flex align-items-center\">Instructions (optional)</label>\n                                            <textarea class=\"form-control form-textarea rounded-2\" [(ngModel)]=\"instructions\"></textarea>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </ng-container>\n                        </div>\n\n                        <div class=\"sub-step-footer\">\n                            <button type=\"button\" class=\"sub-back-btn\" [disabled]=\"subBackOff\" (click)=\"subBack()\">Back</button>\n                            <div class=\"sub-chosen-label\">{{subChosenLabel}}</div>\n                            <button type=\"button\" class=\"sub-next-btn\" *ngIf=\"subStep !== 'details'\" [disabled]=\"subNextOff\" (click)=\"subNext()\">Next</button>\n                        </div>\n                    </div>\n\n                    <div class=\"single-right section-card card\">\n                        <h3 class=\"section-title\">Your Shortlisted Designs</h3>\n                        <div class=\"design-row\" *ngFor=\"let it of productCartItems\">\n                            <div class=\"design-thumb\"></div>\n                            <div class=\"design-info\">\n                                <div class=\"design-name\">{{it.itemName}}</div>\n                                <div class=\"design-price\">\u20B9{{(it.sellingPrice ?? it.price ?? 0) * (it.quantity ?? 1)}}</div>\n                            </div>\n                        </div>\n                        <button type=\"button\" class=\"add-more-btn\" (click)=\"goToListing()\">+ Add More Designs</button>\n\n                        <div class=\"summary-divider\"></div>\n\n                        <div class=\"summary-line\" *ngIf=\"mode !== 'HOME_VISIT' || homeVisitCharge <= 0\">\n                            <div class=\"summary-label\">Service:</div>\n                            <div class=\"free-label\">FREE</div>\n                        </div>\n                        <div class=\"summary-line\" *ngIf=\"mode === 'HOME_VISIT' && homeVisitCharge > 0\">\n                            <div class=\"summary-label\">Home visit charge</div>\n                            <div class=\"summary-value\">\u20B9{{homeVisitCharge}}</div>\n                        </div>\n\n                        <button class=\"continue-btn w-100 mt-2\" [disabled]=\"invalid()\" (click)=\"goToReview()\">Review Booking</button>\n                        <p class=\"footnote\">You will review everything on the next screen before it is confirmed.</p>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'review'\">\n                <div class=\"review-card card\">\n                    <div class=\"review-header\">Review your booking</div>\n                    <div class=\"review-row\" *ngFor=\"let rc of reviewRows\">\n                        <div class=\"review-k\">{{rc.k}}</div>\n                        <div class=\"review-v\">{{rc.v}}</div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"step === 'done'\">\n                <div class=\"booking-confirmation\">\n                    <div class=\"success-icon\">\n                        <div class=\"checkmark-circle\">\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\n                                class=\"w-100 h-100\" *ngIf=\"apiStatus\">\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\n                                class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\n                        </div>\n                    </div>\n\n                    <div class=\"confirmation-content\">\n                        <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\n                        <p class=\"confirmation-message\">\n                            {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book your appointment. Please\n                            try again later'}}\n                        </p>\n\n                        <div class=\"video-call-link-card d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus && mode === 'VIDEO_CALL' && bookingGroup?.videoCallLink\">\n                            <div class=\"details-card\">\n                                <h3 class=\"details-title\">Your Video Call Link</h3>\n                                <a [href]=\"bookingGroup.videoCallLink\" target=\"_blank\">{{bookingGroup.videoCallLink}}</a>\n                            </div>\n                        </div>\n\n                        <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                            <div class=\"details-card\">\n                                <h3 class=\"details-title\">Appointment Details</h3>\n                                <div class=\"details-row\">\n                                    <span class=\"detail-label\">{{productCartItems.length ? 'Products' : (mode === 'HOME_VISIT' ? 'Home Visit' : 'Video Call')}}</span>\n                                    <span class=\"detail-value\">{{selectedDateStr}} at {{selectedSlot?.value ?? 'N/A'}}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"done-actions d-flex align-items-center justify-content-center\" *ngIf=\"apiStatus\">\n                            <button type=\"button\" class=\"done-btn done-btn-primary\" (click)=\"goToMyBookings()\">View my bookings</button>\n                            <button type=\"button\" class=\"done-btn done-btn-secondary\" (click)=\"goToListing()\">Keep shopping</button>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"step === 'review'\">\n        <div class=\"footer-buttons\" style=\"justify-content:space-between\">\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"backToForm()\">Back</span>\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center complete_booking\"\n                (click)=\"confirmBooking()\" [disabled]=\"isProcessing\">\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n                {{isProcessing ? 'Please wait...' : 'Confirm Booking'}}\n            </button>\n        </div>\n    </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\";mat-icon{font-family:Material Icons!important}:host{--font-sans: \"Outfit\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--slate-50: #f8fafc;--slate-100: #f1f5f9;--slate-200: #e2e8f0;--slate-300: #cbd5e1;--slate-400: #94a3b8;--slate-500: #64748b;--slate-600: #475569;--slate-700: #334155;--slate-800: #1e293b;--slate-900: #0f172a;--color-primary: #230860;--color-secondary: #00b6ff;--color-accent-gradient: linear-gradient(135deg, #230860 0%, #00b6ff 100%);--color-success: #10b981;--color-success-bg: #ecfdf5;--color-error: #ef4444;--color-error-bg: #fef2f2;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--border-radius-xl: 24px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 15px -3px rgba(35, 8, 96, .05), 0 4px 6px -4px rgba(35, 8, 96, .05);--shadow-xl: 0 20px 25px -5px rgba(35, 8, 96, .08), 0 8px 10px -6px rgba(35, 8, 96, .08);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;font-family:var(--font-sans)}.main_section{position:relative;height:100vh;background-color:var(--slate-50);display:flex;flex-direction:column;overflow:hidden}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.main_header{padding:15px;background:#fff;border-bottom:1px solid var(--slate-100);flex-shrink:0;box-shadow:0 2px 8px #00000003}.header{display:flex;align-items:center;justify-content:space-between}.back-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--border-radius-md);background:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-700)!important;transition:var(--transition-smooth);font-weight:500;font-size:.9rem;cursor:pointer}.back-btn mat-icon{font-size:18px!important;width:18px!important;height:18px!important;color:var(--slate-700)!important;display:flex;align-items:center;justify-content:center}.back-btn:hover{background:var(--slate-100);transform:translate(-3px);color:var(--slate-900)!important}.header-title{flex-grow:1;text-align:right}.header-title h1{font-size:1.5rem;font-weight:700;margin-bottom:.2rem;color:var(--slate-900)!important;letter-spacing:-.025em}.header-title p{color:var(--slate-500)!important;font-size:.9rem;font-weight:500;margin-bottom:0}.progress-bar{width:100%;height:6px;background-color:var(--slate-100);margin-top:3px;border-radius:10px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-accent-gradient);border-radius:10px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite linear}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.main_body{flex-grow:1;overflow-y:auto;padding:10px;display:flex;justify-content:center;background:var(--slate-50)}.w-60{width:100%;max-width:800px}.service_section,.location_section,.staff-listing,.date_section,.contact_section,.payment_section,.booking-confirmation{animation:slideUp .5s cubic-bezier(.16,1,.3,1) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.5rem;font-weight:700;color:var(--slate-900)!important;letter-spacing:-.02em;margin-bottom:.3rem}p.subtitle,.service-selection p,.location_section p,.staff-subtitle,.datetime-subtitle,.contact-subtitle,.payment-subtitle{color:var(--slate-500)!important;font-size:13px;margin-bottom:2rem}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding-bottom:2rem}.service-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px}.service-card:hover{border-color:var(--slate-400);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.service-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:180px;transform:translateY(-2px)}.service-card-selected:before,.location-card-selected:before{content:\"\\2713\";position:absolute;top:-10px;right:-10px;background:var(--color-accent-gradient);color:#fff!important;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;box-shadow:0 4px 8px #2308604d;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:10}@keyframes popIn{0%{transform:scale(0)}to{transform:scale(1)}}.service-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem}.service-icon{width:48px;height:48px;border-radius:var(--border-radius-md);background-color:var(--slate-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.service-icon mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:var(--color-primary)!important}.service-card-selected .service-icon{background:var(--slate-900)}.service-card-selected .service-icon mat-icon{color:#fff!important}.service-info{flex-grow:1}.service-title{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;line-height:1.3;margin-bottom:.2rem}.service-price{font-size:1.25rem;font-weight:800;color:var(--slate-900)!important;text-align:right}.service-duration{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;text-align:right;margin-top:.1rem}.service-description{color:var(--slate-600)!important;font-size:.9rem;line-height:1.5;margin-bottom:1.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--slate-700)!important;border:1px solid var(--slate-200);padding:.35rem .75rem;border-radius:20px;background-color:var(--slate-50);transition:var(--transition-smooth)}.home-visit img{width:14px;height:14px}.home-visit:before{content:\"\";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--color-success);box-shadow:0 0 #10b98166;animation:pulseGlow 1.8s infinite}@keyframes pulseGlow{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.location-list{display:flex;flex-direction:column;gap:1.25rem;padding-bottom:2rem}.location-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm)}.location-card:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}.location-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:1.5rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px)}.location-content{display:flex;align-items:center}.location-info{display:flex;align-items:center;gap:1.25rem;width:100%}.location-icon{width:52px;height:52px;background-color:var(--slate-100);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-smooth)}.location-icon img{width:28px;height:28px}.location-card-selected .location-icon{background:var(--slate-900)}.location-details{flex-grow:1}.location-details h3{font-size:1.15rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.3rem}.location-details p{font-size:.9rem;color:var(--slate-500)!important;font-weight:450;line-height:1.4;margin-bottom:0}.search-container{width:100%;margin-bottom:1.25rem}.search-input-wrapper{width:100%;background-color:var(--slate-100);border:1.5px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem 1rem;transition:var(--transition-smooth)}.search-input-wrapper:focus-within{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #23086014}.search-input{font-size:.95rem;font-weight:500;color:var(--slate-900)!important;background:transparent;outline:none;width:100%}.search-input::placeholder{color:var(--slate-400)}.search-icon{color:var(--slate-400)!important;font-size:20px!important;width:20px!important;height:20px!important}.clear-icon{color:var(--slate-400)!important;font-size:18px!important;width:18px!important;height:18px!important;transition:var(--transition-smooth)}.clear-icon:hover{color:var(--slate-600)!important}.staff-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;max-height:48vh;overflow-y:auto;padding-right:.5rem;padding-bottom:1rem}.staff-list::-webkit-scrollbar{width:6px}.staff-list::-webkit-scrollbar-track{background:var(--slate-50);border-radius:4px}.staff-list::-webkit-scrollbar-thumb{background:var(--slate-200);border-radius:4px}.staff-list::-webkit-scrollbar-thumb:hover{background:var(--slate-300)}.staff-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-sm);margin-bottom:0!important}.staff-card:hover{border-color:var(--slate-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.staff-card-selected{background:#fff;border:2px solid var(--color-primary);border-radius:var(--border-radius-lg);padding:.9rem 1.25rem;cursor:pointer;transition:var(--transition-bounce);position:relative;box-shadow:var(--shadow-xl);transform:translateY(-1px);margin-bottom:0!important}.staff-avatar{width:48px;height:48px;background:var(--color-accent-gradient);font-size:.95rem;font-weight:700;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px #2308601a;letter-spacing:.5px;transition:var(--transition-smooth)}.staff-card-selected .staff-avatar{transform:scale(1.05)}.staff-name{font-size:1.05rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:.2rem;letter-spacing:-.015em}.staff-specialty{font-size:.8rem;color:var(--slate-500)!important;font-weight:600;margin-bottom:0;text-transform:uppercase;letter-spacing:.05em}.selection-indicator{display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:1rem}.checkmark-circle-mini{width:24px;height:24px;border:2px solid var(--slate-300);border-radius:50%;background-color:#fff;transition:var(--transition-bounce);color:#fff!important}.checkmark-circle-mini.selected{background:var(--color-accent-gradient);border-color:transparent;box-shadow:0 3px 8px #23086040}.checkmark-circle-mini mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#fff!important;font-weight:800!important;display:flex;align-items:center;justify-content:center}.main_container{display:flex;gap:2rem;margin-bottom:2rem}.section-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);height:100%}.section-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:10px!important;letter-spacing:-.01em}.time_selection{max-height:420px;display:flex;flex-direction:column}.time_selection .row{flex-grow:1;overflow-y:auto;padding-right:.25rem;margin-top:10px}.time-slot{background:#fff;border:1px solid var(--slate-200);font-size:.75rem;font-weight:600;color:var(--slate-800)!important;height:34px;padding:0 4px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.time-slot:hover{border-color:var(--slate-400);transform:translateY(-2px);box-shadow:var(--shadow-md);background-color:var(--slate-50)}.time-slot.selected{background:var(--color-accent-gradient);border-color:transparent;color:#fff!important;box-shadow:0 4px 12px #23086033}.form-section{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.75rem;box-shadow:var(--shadow-sm)}.form-label{font-size:.85rem;font-weight:600;color:var(--slate-700)!important;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.required-asterisk{color:var(--color-error);margin-left:2px}.form-control,.form-input,.form-textarea{width:100%;background-color:var(--slate-50);border:1px solid var(--slate-200);color:var(--slate-900)!important;font-size:.95rem;font-weight:500;padding:.75rem 1rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);outline:none}.form-control:focus,.form-input:focus,.form-textarea:focus{background-color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 3px #2308601a}.form-textarea{min-height:100px;resize:vertical}.policies-container{background-color:#fff;border:1px solid var(--slate-200);padding:1.75rem;border-radius:var(--border-radius-lg);margin-top:1.5rem;box-shadow:var(--shadow-sm)}.policies-title{font-size:1.1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1.25rem}.policy-item{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1rem 1.25rem;cursor:pointer;transition:var(--transition-smooth);display:flex;justify-content:space-between;align-items:center}.policy-item:hover{background-color:var(--slate-100);border-color:var(--slate-300)}.policy-title{font-size:.95rem;font-weight:600;color:var(--slate-800)!important}.policy-arrow mat-icon{color:var(--slate-500)!important;transition:var(--transition-smooth)}.cancellation_policies{background-color:var(--slate-50);padding:1rem 1.5rem;border-left:3px solid var(--color-primary);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);margin-top:-4px;margin-bottom:1rem;font-size:.9rem;color:var(--slate-600)!important;line-height:1.5}.acceptance-section{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}.custom-checkbox{width:20px;height:20px;border:2px solid var(--slate-300);border-radius:6px;cursor:pointer;transition:var(--transition-smooth);position:relative;appearance:none;background-color:#fff;outline:none}.custom-checkbox:checked{background:var(--color-accent-gradient);border-color:transparent}.custom-checkbox:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff!important;font-size:.75rem;font-weight:800}.acceptance-text{font-size:.95rem;color:var(--slate-700)!important;font-weight:500;-webkit-user-select:none;user-select:none;line-height:1.4}.booking-summary-card{background-color:#fff;border:1px solid var(--slate-200);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);position:relative}.booking-summary-card:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:10px;background-image:radial-gradient(circle,white 4px,transparent 5px);background-size:12px 12px;background-position:0 0;z-index:2}.summary-title{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important;border-bottom:2px dashed var(--slate-200);padding-bottom:1rem;margin-bottom:1.5rem;text-align:center}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--slate-100)}.summary-label{font-size:.95rem;color:var(--slate-500)!important;font-weight:500}.summary-value{font-size:.95rem;color:var(--slate-900)!important;font-weight:600;text-align:right}.total-row{margin-top:1rem;padding-top:1.25rem;border-top:2px dashed var(--slate-200);border-bottom:none}.total-row .summary-label{font-size:1.25rem;font-weight:700;color:var(--slate-900)!important}.total-row .summary-value{font-size:1.5rem;font-weight:800;color:var(--color-primary)!important}.booking-confirmation{background:#fff;border:1px solid var(--slate-200);padding:3rem 2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;max-width:500px;margin:0 auto}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:96px;height:96px;display:flex;align-items:center;justify-content:center}.confirmation-title{font-size:1.5rem;font-weight:800;color:var(--slate-900)!important;margin-bottom:.5rem}.confirmation-message{font-size:1rem;color:var(--slate-500)!important;line-height:1.6;margin-bottom:2rem;font-weight:450}.details-card{background-color:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:1.5rem;width:100%;margin-bottom:2rem;text-align:left}.details-title{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.details-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed var(--slate-200)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.85rem;color:var(--slate-500)!important;font-weight:500}.detail-value{font-size:.9rem;color:var(--slate-900)!important;font-weight:600}.done-actions{display:flex;gap:12px;width:100%}.done-btn{flex:1;max-width:220px;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);border:none}.done-btn-primary{background:var(--color-accent-gradient);color:#fff!important;box-shadow:0 4px 10px #23086033}.done-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.done-btn-secondary{background:#fff;color:var(--slate-600)!important;border:1px solid var(--slate-200)}.done-btn-secondary:hover{background-color:var(--slate-100);color:var(--slate-900)!important}.main_footer{border-top:1px solid var(--slate-200);background-color:#fff;padding:15px;flex-shrink:0;display:flex;justify-content:center;box-shadow:0 -4px 12px #00000005}.footer-buttons{width:100%;max-width:800px;display:flex;align-items:center}.back-footer-btn{font-size:.95rem;font-weight:600;color:var(--slate-600)!important;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);transition:var(--transition-smooth);cursor:pointer}.back-footer-btn:hover{color:var(--slate-900)!important;background-color:var(--slate-100)}.continue-btn{background:var(--color-accent-gradient);color:#fff!important;border:none;padding:.75rem 2rem;border-radius:var(--border-radius-md);font-size:.95rem!important;font-weight:600;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 10px #23086033;width:max-content!important}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.continue-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.complete_booking,.pay-now-btn{background:var(--color-accent-gradient)!important;color:#fff!important;border:none;padding:.75rem 2.25rem!important;font-size:.95rem!important;font-weight:600;border-radius:var(--border-radius-md)!important;box-shadow:0 4px 12px #23086040;transition:var(--transition-smooth);cursor:pointer;display:flex;align-items:center;gap:.5rem;width:max-content!important}.complete_booking img,.pay-now-btn img{width:20px;height:20px;filter:brightness(0) invert(1)}.complete_booking:hover:not([disabled]),.pay-now-btn:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 6px 18px #23086059}.complete_booking:disabled,.pay-now-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed;box-shadow:none}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.5rem;padding:0;width:100%}.skeleton-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:1.5rem;height:180px;display:flex;flex-direction:column;justify-content:space-between}.skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border-radius:4px}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:48px;height:48px;border-radius:var(--border-radius-md)}.skeleton-title{height:20px;width:60%;margin-bottom:.5rem}.skeleton-price{height:20px;width:30%}.skeleton-duration{height:12px;width:25%;margin-top:.25rem}.skeleton-description{height:14px;width:85%}.skeleton-badge{height:28px;width:120px;border-radius:20px}.time-slot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;width:100%}.skeleton-time-slot{height:42px;border-radius:var(--border-radius-md);background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear;border:1px solid var(--slate-100)}@media screen and (max-width: 475px){.main_header{padding:1rem}.header-title h1{font-size:1.25rem}.back-btn{padding:.5rem .8rem}.back-btn span{display:none}.main_body{padding:15px}.services-grid{grid-template-columns:1fr;gap:1rem}.staff-list{grid-template-columns:1fr!important;gap:.85rem!important}.service-card,.service-card-selected{min-height:auto}.main_container{flex-direction:column;gap:1.5rem}.details_container{gap:1.5rem}.details_container>.d-flex{flex-direction:column;gap:1.5rem}.details_container>.d-flex>div{width:100%!important}.booking-summary-card{padding:1.25rem}.summary-title{font-size:1.15rem}.total-row .summary-label{font-size:1.1rem}.total-row .summary-value{font-size:1.3rem}.main_footer{padding:1rem}.continue-btn{padding:.75rem 1.5rem}}h1{font-size:24px!important;font-weight:600!important}.wiz-container{width:100%;max-width:1120px}.wizard-banner{border-radius:var(--border-radius-lg);padding:1.125rem 1.5rem;background:var(--color-accent-gradient);box-shadow:var(--shadow-sm)}.wizard-banner-title{font-size:1.1rem;font-weight:700;color:#fff!important}.wizard-banner-desc{font-size:.85rem;line-height:1.5;color:#ffffffd9!important;padding-top:.2rem;max-width:520px}.sub-step-tabs{display:flex;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.sub-step-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:none;background:#fff;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--slate-500)!important;cursor:pointer;border-bottom:2px solid transparent;transition:var(--transition-smooth)}.sub-step-tab.active{color:var(--slate-900)!important;border-bottom-color:var(--color-primary);background:var(--slate-50)}.sub-step-tab.locked{color:var(--slate-300)!important;cursor:not-allowed}.sub-step-dot{width:20px;height:20px;border-radius:50%;background:var(--slate-200);color:var(--slate-500)!important;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sub-step-tab.active .sub-step-dot{background:var(--color-accent-gradient);color:#fff!important}.sub-step-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);padding:.85rem 1.25rem;box-shadow:var(--shadow-sm)}.sub-back-btn{height:40px;font-size:.85rem;font-weight:600;color:var(--slate-600)!important;background:none;border:1.5px solid var(--slate-200);padding:0 18px;border-radius:var(--border-radius-md);cursor:pointer;transition:var(--transition-smooth);flex-shrink:0}.sub-back-btn:hover:not(:disabled){color:var(--slate-900)!important;background-color:var(--slate-100)}.sub-back-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.sub-chosen-label{font-size:.8rem;color:var(--slate-500)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sub-next-btn{height:40px;background:var(--color-accent-gradient);color:#fff!important;border:none;padding:0 22px;border-radius:var(--border-radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition-smooth);flex-shrink:0}.sub-next-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #2308604d}.sub-next-btn:disabled{background:var(--slate-200)!important;color:var(--slate-400)!important;cursor:not-allowed!important;box-shadow:none!important}.single-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}.single-left{display:flex;flex-direction:column;gap:1.5rem}.single-right{align-self:flex-start;position:sticky;top:10px}.week-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.week-arrows{display:flex;gap:8px}.week-arrow-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--slate-200);background:#fff;color:var(--slate-700)!important;cursor:pointer;display:flex;align-items:center;justify-content:center}.week-arrow-btn:disabled{color:var(--slate-300)!important;cursor:not-allowed}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.week-day{background:#fff;border:1px solid var(--slate-200);border-radius:var(--border-radius-md);padding:.6rem .25rem;cursor:pointer;transition:var(--transition-smooth);text-align:center}.week-day:hover{border-color:var(--slate-400)}.week-day.selected{background:var(--color-accent-gradient);border-color:transparent}.week-day.selected .week-day-dow,.week-day.selected .week-day-num{color:#fff!important}.week-day-dow{font-size:.75rem;font-weight:600;color:var(--slate-500)!important;text-transform:uppercase}.week-day-num{font-size:1rem;font-weight:700;color:var(--slate-900)!important;margin-top:2px}.booking-for-line{font-size:.9rem;color:var(--slate-600)!important;padding:.85rem 1rem;background:var(--slate-50);border-radius:var(--border-radius-md);margin-bottom:.5rem}.booking-for-line strong{color:var(--slate-900)!important}.shipping-info{border-radius:10px;padding:20px;margin-bottom:12px;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}.address-info{margin-bottom:0}.address-name{font-weight:700;margin-bottom:8px;color:var(--slate-900)!important}.address-details{color:var(--slate-500)!important;margin-bottom:8px}.mobile-number{font-weight:700;color:var(--slate-900)!important;font-size:15px}.change-address-btn{font-size:.85rem!important;font-weight:700!important;padding:10px;background:#fff;border:1px solid var(--slate-200);border-radius:8px;color:var(--slate-900)!important;cursor:pointer;transition:var(--transition-smooth)}.change-address-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.addLinks{padding:14px;border:1px dashed var(--slate-300);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:var(--slate-500)!important;margin-bottom:12px}.addLinks:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.design-row{display:flex;gap:13px;align-items:center;padding-bottom:1rem}.design-thumb{width:56px;height:56px;border-radius:8px;background:var(--slate-100);flex:none}.design-info{flex:1}.design-name{font-size:13.5px;color:var(--slate-900)!important;line-height:1.35}.design-price{font-size:13.5px;font-weight:600;color:var(--slate-900)!important;margin-top:3px}.add-more-btn{width:100%;height:44px;border:1.5px dashed var(--slate-300);border-radius:8px;background:none;color:var(--color-primary)!important;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:1rem}.summary-divider{height:1px;background:var(--slate-100);margin-bottom:1rem}.summary-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.free-label{font-size:13.5px;font-weight:600;color:var(--color-success)!important}.footnote{font-size:11.5px;line-height:1.5;color:var(--slate-500)!important;text-align:center;margin:.75rem 0 0}.review-card{max-width:560px;margin:0 auto;border:1px solid var(--slate-200);border-radius:var(--border-radius-lg);overflow:hidden}.review-header{padding:14px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-100);font-size:14.5px;font-weight:700;color:var(--slate-900)!important}.review-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--slate-100);font-size:13.5px}.review-row:last-child{border-bottom:none}.review-k{color:var(--slate-500)!important;flex-shrink:0}.review-v{color:var(--slate-900)!important;font-weight:500;text-align:right}@media screen and (max-width: 900px){.single-grid{grid-template-columns:1fr}.single-right{position:static}}@media screen and (max-width: 475px){.week-strip{gap:6px}}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: i2$2.Router }, { type: RestService }, { type: EventsService }, { type: i6$1.MessageService }, { type: StorageServiceService }, { type: BookingProductCartService }, { type: i3$2.MatDialog }], propDecorators: { data: [{
                 type: Input
             }], index: [{