codexly-ui 0.10.57 → 0.10.59

package/fesm2022/codexly-ui.mjs

@@ -13034,43 +13034,18 @@ class ClxPageEmptyComponent {
     ctaLabel = input('', ...(ngDevMode ? [{ debugName: "ctaLabel" }] : /* istanbul ignore next */ []));
     ctaIcon = input('add', ...(ngDevMode ? [{ debugName: "ctaIcon" }] : /* istanbul ignore next */ []));
     ctaColor = input(undefined, ...(ngDevMode ? [{ debugName: "ctaColor" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _ctaColor = computed(() => this.ctaColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_ctaColor" }] : /* istanbul ignore next */ []));
     cta = output();
-    _iconWrap() {
-        const s = this.size();
-        const sz = s === 'sm' ? 'w-12 h-12' : s === 'lg' ? 'w-20 h-20' : 'w-16 h-16';
-        return `${sz} rounded-2xl bg-clx-surface-2 flex items-center justify-center mb-4`;
-    }
-    _iconSize() {
-        const s = this.size();
-        return s === 'sm' ? 'md' : s === 'lg' ? 'xl' : 'lg';
-    }
-    _titleCls() {
-        const s = this.size();
-        return s === 'sm'
-            ? 'text-sm font-semibold text-clx-text-label mb-1'
-            : s === 'lg'
-                ? 'text-xl font-semibold text-clx-text-label mb-2'
-                : 'text-base font-semibold text-clx-text-label mb-1';
-    }
-    _descCls() {
-        const s = this.size();
-        return `${s === 'lg' ? 'text-sm' : 'text-xs'} text-clx-text-subtle max-w-xs mb-5`;
-    }
-    _ctaCls() {
-        return this.size() === 'sm' ? 'mt-3' : 'mt-5';
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageEmptyComponent, isStandalone: true, selector: "clx-page-empty", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaIcon: { classPropertyName: "ctaIcon", publicName: "ctaIcon", isSignal: true, isRequired: false, transformFunction: null }, ctaColor: { classPropertyName: "ctaColor", publicName: "ctaColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cta: "cta" }, host: { classAttribute: "flex flex-col items-center justify-center w-full px-6 text-center" }, ngImport: i0, template: `
-    <div [class]="_iconWrap()">
-      <span clx-icon [name]="icon()" [size]="_iconSize()" class="text-clx-text-faint"></span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageEmptyComponent, isStandalone: true, selector: "clx-page-empty", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaIcon: { classPropertyName: "ctaIcon", publicName: "ctaIcon", isSignal: true, isRequired: false, transformFunction: null }, ctaColor: { classPropertyName: "ctaColor", publicName: "ctaColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cta: "cta" }, host: { classAttribute: "flex flex-col items-center justify-center w-full px-6 text-center text-sm" }, ngImport: i0, template: `
+    <div class="w-20 h-20 rounded-2xl bg-clx-surface-2 flex items-center justify-center mb-6">
+      <span clx-icon [name]="icon()" size="xl" class="text-clx-text-faint"></span>
     </div>
 
-    <p [class]="_titleCls()">{{ title() }}</p>
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
 
     @if (description()) {
-      <p [class]="_descCls()">{{ description() }}</p>
+      <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
     }
 
     @if (ctaLabel()) {
@@ -13080,7 +13055,6 @@ class ClxPageEmptyComponent {
         [color]="_ctaColor()"
         variant="solid"
         [icon]="ctaIcon()"
-        [class]="_ctaCls()"
         (click)="cta.emit()">
         {{ ctaLabel() }}
       </button>
@@ -13095,16 +13069,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     imports: [ClxButtonComponent, ClxIconComponent],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'flex flex-col items-center justify-center w-full px-6 text-center' },
+                    host: { class: 'flex flex-col items-center justify-center w-full px-6 text-center text-sm' },
                     template: `
-    <div [class]="_iconWrap()">
-      <span clx-icon [name]="icon()" [size]="_iconSize()" class="text-clx-text-faint"></span>
+    <div class="w-20 h-20 rounded-2xl bg-clx-surface-2 flex items-center justify-center mb-6">
+      <span clx-icon [name]="icon()" size="xl" class="text-clx-text-faint"></span>
     </div>
 
-    <p [class]="_titleCls()">{{ title() }}</p>
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
 
     @if (description()) {
-      <p [class]="_descCls()">{{ description() }}</p>
+      <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
     }
 
     @if (ctaLabel()) {
@@ -13114,14 +13088,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [color]="_ctaColor()"
         variant="solid"
         [icon]="ctaIcon()"
-        [class]="_ctaCls()"
         (click)="cta.emit()">
         {{ ctaLabel() }}
       </button>
     }
   `,
                 }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], ctaIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaIcon", required: false }] }], ctaColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], cta: [{ type: i0.Output, args: ["cta"] }] } });
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], ctaIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaIcon", required: false }] }], ctaColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaColor", required: false }] }], cta: [{ type: i0.Output, args: ["cta"] }] } });
 
 class ClxTableComponent {
     _themeSvc = inject(ClxThemeService);
@@ -13416,7 +13389,7 @@ class ClxTableComponent {
       </div>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "title", "description", "ctaLabel", "ctaIcon", "ctaColor", "size"], outputs: ["cta"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClxCheckboxComponent, selector: "clx-checkbox", inputs: ["color", "variant", "size", "label", "value", "disabled"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "title", "description", "ctaLabel", "ctaIcon", "ctaColor"], outputs: ["cta"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableComponent, decorators: [{
             type: Component,
@@ -13576,13 +13549,13 @@ class ClxPageNotFoundComponent {
     backLabel = input('Volver al inicio', ...(ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []));
     back = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageNotFoundComponent, isStandalone: true, selector: "clx-page-not-found", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex flex-col items-center justify-center min-h-[60vh] px-6 text-center" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageNotFoundComponent, isStandalone: true, selector: "clx-page-not-found", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex flex-col items-center justify-center min-h-[60vh] px-6 text-center text-sm" }, ngImport: i0, template: `
     <div class="w-20 h-20 rounded-2xl bg-indigo-50 flex items-center justify-center mb-6">
       <span clx-icon name="search_off" size="xl" class="text-indigo-400"></span>
     </div>
 
-    <p class="text-7xl font-black text-clx-text-faint leading-none select-none mb-2">404</p>
-    <h1 class="text-xl font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
+    <p class="text-[50px] font-black text-clx-text-faint leading-none select-none mb-2">404</p>
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
     <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
 
     @if (backLabel()) {
@@ -13606,14 +13579,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     imports: [ClxButtonComponent, ClxIconComponent],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'flex flex-col items-center justify-center min-h-[60vh] px-6 text-center' },
+                    host: { class: 'flex flex-col items-center justify-center min-h-[60vh] px-6 text-center text-sm' },
                     template: `
     <div class="w-20 h-20 rounded-2xl bg-indigo-50 flex items-center justify-center mb-6">
       <span clx-icon name="search_off" size="xl" class="text-indigo-400"></span>
     </div>
 
-    <p class="text-7xl font-black text-clx-text-faint leading-none select-none mb-2">404</p>
-    <h1 class="text-xl font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
+    <p class="text-[50px] font-black text-clx-text-faint leading-none select-none mb-2">404</p>
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
     <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
 
     @if (backLabel()) {
@@ -13640,13 +13613,13 @@ class ClxPageUnauthorizedComponent {
     login = output();
     back = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageUnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageUnauthorizedComponent, isStandalone: true, selector: "clx-page-unauthorized", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, loginLabel: { classPropertyName: "loginLabel", publicName: "loginLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", back: "back" }, host: { classAttribute: "flex flex-col items-center justify-center min-h-[60vh] px-6 text-center" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageUnauthorizedComponent, isStandalone: true, selector: "clx-page-unauthorized", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, loginLabel: { classPropertyName: "loginLabel", publicName: "loginLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", back: "back" }, host: { classAttribute: "flex flex-col items-center justify-center min-h-[60vh] px-6 text-center text-sm" }, ngImport: i0, template: `
     <div class="w-20 h-20 rounded-2xl bg-amber-50 flex items-center justify-center mb-6">
       <span clx-icon name="lock" size="xl" class="text-amber-400"></span>
     </div>
 
-    <p class="text-7xl font-black text-clx-text-faint leading-none select-none mb-2">{{ code() }}</p>
-    <h1 class="text-xl font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
+    <p class="text-[50px] font-black text-clx-text-faint leading-none select-none mb-2">{{ code() }}</p>
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
     <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
 
     <div class="flex items-center gap-3">
@@ -13683,14 +13656,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     imports: [ClxButtonComponent, ClxIconComponent],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'flex flex-col items-center justify-center min-h-[60vh] px-6 text-center' },
+                    host: { class: 'flex flex-col items-center justify-center min-h-[60vh] px-6 text-center text-sm' },
                     template: `
     <div class="w-20 h-20 rounded-2xl bg-amber-50 flex items-center justify-center mb-6">
       <span clx-icon name="lock" size="xl" class="text-amber-400"></span>
     </div>
 
-    <p class="text-7xl font-black text-clx-text-faint leading-none select-none mb-2">{{ code() }}</p>
-    <h1 class="text-xl font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
+    <p class="text-[50px] font-black text-clx-text-faint leading-none select-none mb-2">{{ code() }}</p>
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
     <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
 
     <div class="flex items-center gap-3">
@@ -13730,13 +13703,13 @@ class ClxPageServerErrorComponent {
     retry = output();
     back = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageServerErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageServerErrorComponent, isStandalone: true, selector: "clx-page-server-error", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, errorId: { classPropertyName: "errorId", publicName: "errorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry", back: "back" }, host: { classAttribute: "flex flex-col items-center justify-center min-h-[60vh] px-6 text-center" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageServerErrorComponent, isStandalone: true, selector: "clx-page-server-error", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, errorId: { classPropertyName: "errorId", publicName: "errorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry", back: "back" }, host: { classAttribute: "flex flex-col items-center justify-center min-h-[60vh] px-6 text-center text-sm" }, ngImport: i0, template: `
     <div class="w-20 h-20 rounded-2xl bg-red-50 flex items-center justify-center mb-6">
       <span clx-icon name="error_outline" size="xl" class="text-red-400"></span>
     </div>
 
-    <p class="text-7xl font-black text-clx-text-faint leading-none select-none mb-2">500</p>
-    <h1 class="text-xl font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
+    <p class="text-[50px] font-black text-clx-text-faint leading-none select-none mb-2">500</p>
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
     <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
 
     @if (errorId()) {
@@ -13777,14 +13750,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     imports: [ClxButtonComponent, ClxIconComponent],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'flex flex-col items-center justify-center min-h-[60vh] px-6 text-center' },
+                    host: { class: 'flex flex-col items-center justify-center min-h-[60vh] px-6 text-center text-sm' },
                     template: `
     <div class="w-20 h-20 rounded-2xl bg-red-50 flex items-center justify-center mb-6">
       <span clx-icon name="error_outline" size="xl" class="text-red-400"></span>
     </div>
 
-    <p class="text-7xl font-black text-clx-text-faint leading-none select-none mb-2">500</p>
-    <h1 class="text-xl font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
+    <p class="text-[50px] font-black text-clx-text-faint leading-none select-none mb-2">500</p>
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
     <p class="text-clx-text-subtle max-w-sm mb-8">{{ description() }}</p>
 
     @if (errorId()) {
@@ -14271,7 +14244,7 @@ class ClxProductComponent {
               clxTooltip="Añadir a favoritos"
               clxTooltipPosition="left"
               [clxTooltipColor]="clxColor()"
-              (click)="addToWishlist.emit(product()!)"
+              (click)="$event.stopPropagation(); addToWishlist.emit(product()!)"
             ></button>
           </div>
 
@@ -14292,10 +14265,10 @@ class ClxProductComponent {
 
             <!-- Price -->
             <div class="flex items-baseline gap-2 mt-2">
-              <span [class]="_priceClass()">{{ _price() | currency:'COP':'symbol':'1.0-0' }}</span>
+              <span [class]="_priceClass()">{{ _price() | currency:'COP':'$':'1.0-0' }}</span>
               @if (product()?.has_discount && product()?.discount_price) {
                 <span class="text-sm text-clx-text-subtle line-through">
-                  {{ product()?.discount_price | currency:'COP':'symbol':'1.0-0' }}
+                  {{ product()?.discount_price | currency:'COP':'$':'1.0-0' }}
                 </span>
               }
             </div>
@@ -14313,7 +14286,7 @@ class ClxProductComponent {
               iconPosition="left"
               [disabled]="_disabled()"
               [block]="true"
-              (click)="_hasMultipleOptions() ? viewOptions.emit(product()!) : addToCart.emit(product()!)"
+              (click)="$event.stopPropagation(); _hasMultipleOptions() ? viewOptions.emit(product()!) : addToCart.emit(product()!)"
             >
               {{ _hasMultipleOptions() ? 'Ver opciones' : 'Añadir al carrito' }}
             </button>
@@ -14406,7 +14379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               clxTooltip="Añadir a favoritos"
               clxTooltipPosition="left"
               [clxTooltipColor]="clxColor()"
-              (click)="addToWishlist.emit(product()!)"
+              (click)="$event.stopPropagation(); addToWishlist.emit(product()!)"
             ></button>
           </div>
 
@@ -14427,10 +14400,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
             <!-- Price -->
             <div class="flex items-baseline gap-2 mt-2">
-              <span [class]="_priceClass()">{{ _price() | currency:'COP':'symbol':'1.0-0' }}</span>
+              <span [class]="_priceClass()">{{ _price() | currency:'COP':'$':'1.0-0' }}</span>
               @if (product()?.has_discount && product()?.discount_price) {
                 <span class="text-sm text-clx-text-subtle line-through">
-                  {{ product()?.discount_price | currency:'COP':'symbol':'1.0-0' }}
+                  {{ product()?.discount_price | currency:'COP':'$':'1.0-0' }}
                 </span>
               }
             </div>
@@ -14448,7 +14421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               iconPosition="left"
               [disabled]="_disabled()"
               [block]="true"
-              (click)="_hasMultipleOptions() ? viewOptions.emit(product()!) : addToCart.emit(product()!)"
+              (click)="$event.stopPropagation(); _hasMultipleOptions() ? viewOptions.emit(product()!) : addToCart.emit(product()!)"
             >
               {{ _hasMultipleOptions() ? 'Ver opciones' : 'Añadir al carrito' }}
             </button>
@@ -14468,6 +14441,9 @@ class ClxProductDetailComponent {
     clxColor = input('indigo', ...(ngDevMode ? [{ debugName: "clxColor" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     currency = input('COP', ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
+    /** Hides the tabs (Características/Especificaciones/Descripción) and the Reviews section —
+     *  for contexts like a quick-view modal where only the gallery + spec selector + CTA matter. */
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     addToCart = output();
     buyNow = output();
     wishlist = output();
@@ -14556,7 +14532,7 @@ class ClxProductDetailComponent {
     specsLeft(specs) { return specs.slice(0, Math.ceil(specs.length / 2)); }
     specsRight(specs) { return specs.slice(Math.ceil(specs.length / 2)); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductDetailComponent, isStandalone: true, selector: "clx-product-detail", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, initialVariationId: { classPropertyName: "initialVariationId", publicName: "initialVariationId", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", buyNow: "buyNow", wishlist: "wishlist", variationChange: "variationChange" }, viewQueries: [{ propertyName: "_carousel", first: true, predicate: ClxCarouselComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 md:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2014 each column sizes to its own content (no forced equal\n           height, no position:sticky). A `sticky` gallery reads great in isolation, but a host app\n           that already has its own `position: sticky` header (a full-width top bar, as opposed to\n           this library's own `clx-app-layout` sidebar, which is `fixed` and never competes) forces\n           the browser to keep recomputing both stickies' viewport-relative offsets together on every\n           resize \u2014 confirmed as the source of a persistent resize-lag bug in codexly-store's product\n           page. Not worth reintroducing until sticky positioning is made robust to an arbitrary host\n           header. \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"flex flex-col gap-3\">\n        <div class=\"relative aspect-4/3\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track i; let i = $index) {\n              <ng-template clxSlide>\n                <div class=\"w-full h-full p-5 sm:p-12.5 md:p-5 lg:p-12.5\">\n                  <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-contain\"\n                       [loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                       [attr.fetchpriority]=\"i === 0 ? 'high' : null\" />\n                </div>\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Agregar a favoritos\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\"\n                    (click)=\"wishlist.emit()\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track i; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-[border-color,opacity]\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-2.5\">\n\n        <!-- Stock status -->\n        @if (v) {\n          <span clx-badge [variant]=\"v.in_stock ? 'light' : 'solid'\" [color]=\"v.in_stock ? clxColor() : 'green'\" size=\"sm\" shape=\"pill\">\n            @if (v.in_stock) {\n              @if (v.stock_quantity != null) {\n                {{ v.stock_quantity }} en stock\n              } @else {\n                En stock\n              }\n            } @else {\n              Sin stock\n            }\n          </span>\n        }\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-1\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-sm text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ v?.name || p.product_name }}</h1>\n          @if (p.product_detail) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ p.product_detail }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div>\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-2xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-base text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) \u2014 opciones no disponibles\n             para la combinaci\u00F3n actual (ej. Talla S con Color Rojo) se ocultan por completo en vez\n             de mostrarse deshabilitadas; reaparecen si el usuario cambia a una combinaci\u00F3n donde s\u00ED\n             aplican, ya que isOptionAvailable() se reeval\u00FAa contra selectedSpecs() en cada cambio. -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                @if (isOptionAvailable(specType.id, opt.id)) {\n                  <button\n                          type=\"button\"\n                          class=\"w-7 h-7 rounded-full border-2 transition-[transform,box-shadow] shrink-0 cursor-pointer\"\n                          [class]=\"isSpecSelected(specType.id, opt.id) ? 'scale-110 shadow-md' : 'opacity-90 hover:opacity-100'\"\n                          [style.background-color]=\"opt.value\"\n                          [style.border-color]=\"isSpecSelected(specType.id, opt.id) ? 'var(--clx-text-label, #111)' : 'transparent'\"\n                          [clxTooltip]=\"opt.label ?? opt.value\"\n                          clxTooltipPosition=\"top\"\n                          (click)=\"selectSpec(specType.id, opt.id)\">\n                  </button>\n                }\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                @if (isOptionAvailable(specType.id, opt.id)) {\n                  <button clx-button\n                          type=\"button\"\n                          [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                          [color]=\"clxColor()\" size=\"sm\"\n                          (click)=\"selectSpec(specType.id, opt.id)\">\n                    {{ opt.label ?? opt.value }}\n                  </button>\n                }\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitBuyNow()\">Comprar ahora</button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitAddToCart()\">Agrega al carrito</button>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n      <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n      <ng-template [clxTabPanel]=\"'general'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsLeft(p.product_specs); track spec.id) {\n              <clx-list-item [icon]=\"spec.icon ?? ''\">\n                <div clxContent>\n                  <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                  <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                </div>\n              </clx-list-item>\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsRight(p.product_specs); track spec.id) {\n              <clx-list-item [icon]=\"spec.icon ?? ''\">\n                <div clxContent>\n                  <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                  <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                </div>\n              </clx-list-item>\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n      <ng-template [clxTabPanel]=\"'specs'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsLeft(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsRight(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n      <ng-template [clxTabPanel]=\"'description'\">\n        <div class=\"space-y-5\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n\n    </clx-tabs>\n\n    <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <div class=\"pb-1 space-y-1\">\n            <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n            <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n          </div>\n        </div>\n        <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n        <div class=\"pt-2 space-y-2\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n            Report abuse\n          </button>\n        </div>\n      </div>\n\n      <div class=\"lg:col-span-2 space-y-4\">\n        @for (review of p.reviews ?? []; track review.id) {\n          <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n            <div class=\"flex items-center gap-3 px-4 py-3\">\n              <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-clx-text-muted\">\n                  {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                </span>\n              </div>\n              <div class=\"flex-1 min-w-0\">\n                <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n              </div>\n              @if (review.is_verified) {\n                <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n              }\n            </div>\n            <div class=\"px-4 pb-4 space-y-2\">\n              <div class=\"flex items-center gap-2\">\n                <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                @if (review.title) {\n                  <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxButtonGroupComponent, selector: "clx-button-group", inputs: ["label", "shape", "attached", "orientation"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxRatingComponent, selector: "clx-rating", inputs: ["value", "max", "color"] }, { kind: "component", type: ClxCarouselComponent, selector: "clx-carousel", inputs: ["clxColor", "autoPlay", "interval", "loop", "aspectRatio", "transparent"] }, { kind: "directive", type: ClxCarouselDirective, selector: "[clxSlide]" }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }, { kind: "directive", type: ClxTabDirective, selector: "[clxTabPanel]", inputs: ["clxTabPanel"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxListComponent, selector: "clx-list", inputs: ["color", "variant", "size", "numbered"] }, { kind: "component", type: ClxListItemComponent, selector: "clx-list-item", inputs: ["label", "sublabel", "icon", "meta", "metaColor", "disabled"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductDetailComponent, isStandalone: true, selector: "clx-product-detail", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, initialVariationId: { classPropertyName: "initialVariationId", publicName: "initialVariationId", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", buyNow: "buyNow", wishlist: "wishlist", variationChange: "variationChange" }, viewQueries: [{ propertyName: "_carousel", first: true, predicate: ClxCarouselComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 md:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2014 each column sizes to its own content (no forced equal\n           height, no position:sticky). A `sticky` gallery reads great in isolation, but a host app\n           that already has its own `position: sticky` header (a full-width top bar, as opposed to\n           this library's own `clx-app-layout` sidebar, which is `fixed` and never competes) forces\n           the browser to keep recomputing both stickies' viewport-relative offsets together on every\n           resize \u2014 confirmed as the source of a persistent resize-lag bug in codexly-store's product\n           page. Not worth reintroducing until sticky positioning is made robust to an arbitrary host\n           header. \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"flex flex-col gap-3\">\n        <div class=\"relative aspect-4/3\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track i; let i = $index) {\n              <ng-template clxSlide>\n                <div class=\"w-full h-full p-5 sm:p-12.5 md:p-5 lg:p-12.5\">\n                  <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-contain\"\n                       [loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                       [attr.fetchpriority]=\"i === 0 ? 'high' : null\" />\n                </div>\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Agregar a favoritos\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\"\n                    (click)=\"wishlist.emit()\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track i; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-[border-color,opacity]\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-2.5\">\n\n        <!-- Stock status -->\n        @if (v) {\n          <span clx-badge [variant]=\"v.in_stock ? 'light' : 'solid'\" [color]=\"v.in_stock ? clxColor() : 'green'\" size=\"sm\" shape=\"pill\">\n            @if (v.in_stock) {\n              @if (v.stock_quantity != null) {\n                {{ v.stock_quantity }} en stock\n              } @else {\n                En stock\n              }\n            } @else {\n              Sin stock\n            }\n          </span>\n        }\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-1\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-sm text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ v?.name || p.product_name }}</h1>\n          @if (p.product_detail) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ p.product_detail }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div>\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-2xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'$':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-base text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'$':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) \u2014 opciones no disponibles\n             para la combinaci\u00F3n actual (ej. Talla S con Color Rojo) se ocultan por completo en vez\n             de mostrarse deshabilitadas; reaparecen si el usuario cambia a una combinaci\u00F3n donde s\u00ED\n             aplican, ya que isOptionAvailable() se reeval\u00FAa contra selectedSpecs() en cada cambio. -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                @if (isOptionAvailable(specType.id, opt.id)) {\n                  <button\n                          type=\"button\"\n                          class=\"w-7 h-7 rounded-full border-2 transition-[transform,box-shadow] shrink-0 cursor-pointer\"\n                          [class]=\"isSpecSelected(specType.id, opt.id) ? 'scale-110 shadow-md' : 'opacity-90 hover:opacity-100'\"\n                          [style.background-color]=\"opt.value\"\n                          [style.border-color]=\"isSpecSelected(specType.id, opt.id) ? 'var(--clx-text-label, #111)' : 'transparent'\"\n                          [clxTooltip]=\"opt.label ?? opt.value\"\n                          clxTooltipPosition=\"top\"\n                          (click)=\"selectSpec(specType.id, opt.id)\">\n                  </button>\n                }\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                @if (isOptionAvailable(specType.id, opt.id)) {\n                  <button clx-button\n                          type=\"button\"\n                          [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                          [color]=\"clxColor()\" size=\"sm\"\n                          (click)=\"selectSpec(specType.id, opt.id)\">\n                    {{ opt.label ?? opt.value }}\n                  </button>\n                }\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitBuyNow()\">Comprar ahora</button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitAddToCart()\">Agrega al carrito</button>\n        </div>\n\n      </div>\n    </div>\n\n    @if (!compact()) {\n      <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n        <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n        <ng-template [clxTabPanel]=\"'general'\">\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n            <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n              @for (spec of specsLeft(p.product_specs); track spec.id) {\n                <clx-list-item [icon]=\"spec.icon ?? ''\">\n                  <div clxContent>\n                    <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                    <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                  </div>\n                </clx-list-item>\n              }\n            </clx-list>\n            <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n              @for (spec of specsRight(p.product_specs); track spec.id) {\n                <clx-list-item [icon]=\"spec.icon ?? ''\">\n                  <div clxContent>\n                    <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                    <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                  </div>\n                </clx-list-item>\n              }\n            </clx-list>\n          </div>\n        </ng-template>\n\n        <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n        <ng-template [clxTabPanel]=\"'specs'\">\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n            <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n              @for (st of specsLeft(p.spec_types); track st.id) {\n                <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n              }\n            </clx-list>\n            <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n              @for (st of specsRight(p.spec_types); track st.id) {\n                <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n              }\n            </clx-list>\n          </div>\n        </ng-template>\n\n        <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n        <ng-template [clxTabPanel]=\"'description'\">\n          <div class=\"space-y-5\">\n            @for (block of p.descriptions; track block.id) {\n              <div>\n                @if (block.title) {\n                  <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n                }\n                <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n              </div>\n            }\n          </div>\n        </ng-template>\n\n      </clx-tabs>\n\n      <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n        <div class=\"space-y-3\">\n          <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n          <div class=\"flex items-end gap-3\">\n            <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n            <div class=\"pb-1 space-y-1\">\n              <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n              <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n            </div>\n          </div>\n          <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n          <div class=\"pt-2 space-y-2\">\n            <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n              Leave Us a Review\n            </button>\n            <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n              Report abuse\n            </button>\n          </div>\n        </div>\n\n        <div class=\"lg:col-span-2 space-y-4\">\n          @for (review of p.reviews ?? []; track review.id) {\n            <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n              <div class=\"flex items-center gap-3 px-4 py-3\">\n                <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                  <span class=\"text-sm font-bold text-clx-text-muted\">\n                    {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                  </span>\n                </div>\n                <div class=\"flex-1 min-w-0\">\n                  <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                  <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n                </div>\n                @if (review.is_verified) {\n                  <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n                }\n              </div>\n              <div class=\"px-4 pb-4 space-y-2\">\n                <div class=\"flex items-center gap-2\">\n                  <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                  @if (review.title) {\n                    <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                  }\n                </div>\n                @if (review.body) {\n                  <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n                }\n                <div class=\"flex items-center gap-3 pt-1\">\n                  <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                  <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                  <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n      </div>\n    }\n\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxButtonGroupComponent, selector: "clx-button-group", inputs: ["label", "shape", "attached", "orientation"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxRatingComponent, selector: "clx-rating", inputs: ["value", "max", "color"] }, { kind: "component", type: ClxCarouselComponent, selector: "clx-carousel", inputs: ["clxColor", "autoPlay", "interval", "loop", "aspectRatio", "transparent"] }, { kind: "directive", type: ClxCarouselDirective, selector: "[clxSlide]" }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }, { kind: "directive", type: ClxTabDirective, selector: "[clxTabPanel]", inputs: ["clxTabPanel"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxListComponent, selector: "clx-list", inputs: ["color", "variant", "size", "numbered"] }, { kind: "component", type: ClxListItemComponent, selector: "clx-list-item", inputs: ["label", "sublabel", "icon", "meta", "metaColor", "disabled"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductDetailComponent, decorators: [{
             type: Component,
@@ -14578,8 +14554,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         ClxTooltipDirective,
                         ClxListComponent,
                         ClxListItemComponent,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 md:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2014 each column sizes to its own content (no forced equal\n           height, no position:sticky). A `sticky` gallery reads great in isolation, but a host app\n           that already has its own `position: sticky` header (a full-width top bar, as opposed to\n           this library's own `clx-app-layout` sidebar, which is `fixed` and never competes) forces\n           the browser to keep recomputing both stickies' viewport-relative offsets together on every\n           resize \u2014 confirmed as the source of a persistent resize-lag bug in codexly-store's product\n           page. Not worth reintroducing until sticky positioning is made robust to an arbitrary host\n           header. \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"flex flex-col gap-3\">\n        <div class=\"relative aspect-4/3\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track i; let i = $index) {\n              <ng-template clxSlide>\n                <div class=\"w-full h-full p-5 sm:p-12.5 md:p-5 lg:p-12.5\">\n                  <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-contain\"\n                       [loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                       [attr.fetchpriority]=\"i === 0 ? 'high' : null\" />\n                </div>\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Agregar a favoritos\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\"\n                    (click)=\"wishlist.emit()\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track i; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-[border-color,opacity]\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-2.5\">\n\n        <!-- Stock status -->\n        @if (v) {\n          <span clx-badge [variant]=\"v.in_stock ? 'light' : 'solid'\" [color]=\"v.in_stock ? clxColor() : 'green'\" size=\"sm\" shape=\"pill\">\n            @if (v.in_stock) {\n              @if (v.stock_quantity != null) {\n                {{ v.stock_quantity }} en stock\n              } @else {\n                En stock\n              }\n            } @else {\n              Sin stock\n            }\n          </span>\n        }\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-1\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-sm text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ v?.name || p.product_name }}</h1>\n          @if (p.product_detail) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ p.product_detail }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div>\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-2xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-base text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) \u2014 opciones no disponibles\n             para la combinaci\u00F3n actual (ej. Talla S con Color Rojo) se ocultan por completo en vez\n             de mostrarse deshabilitadas; reaparecen si el usuario cambia a una combinaci\u00F3n donde s\u00ED\n             aplican, ya que isOptionAvailable() se reeval\u00FAa contra selectedSpecs() en cada cambio. -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                @if (isOptionAvailable(specType.id, opt.id)) {\n                  <button\n                          type=\"button\"\n                          class=\"w-7 h-7 rounded-full border-2 transition-[transform,box-shadow] shrink-0 cursor-pointer\"\n                          [class]=\"isSpecSelected(specType.id, opt.id) ? 'scale-110 shadow-md' : 'opacity-90 hover:opacity-100'\"\n                          [style.background-color]=\"opt.value\"\n                          [style.border-color]=\"isSpecSelected(specType.id, opt.id) ? 'var(--clx-text-label, #111)' : 'transparent'\"\n                          [clxTooltip]=\"opt.label ?? opt.value\"\n                          clxTooltipPosition=\"top\"\n                          (click)=\"selectSpec(specType.id, opt.id)\">\n                  </button>\n                }\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                @if (isOptionAvailable(specType.id, opt.id)) {\n                  <button clx-button\n                          type=\"button\"\n                          [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                          [color]=\"clxColor()\" size=\"sm\"\n                          (click)=\"selectSpec(specType.id, opt.id)\">\n                    {{ opt.label ?? opt.value }}\n                  </button>\n                }\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitBuyNow()\">Comprar ahora</button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitAddToCart()\">Agrega al carrito</button>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n      <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n      <ng-template [clxTabPanel]=\"'general'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsLeft(p.product_specs); track spec.id) {\n              <clx-list-item [icon]=\"spec.icon ?? ''\">\n                <div clxContent>\n                  <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                  <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                </div>\n              </clx-list-item>\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsRight(p.product_specs); track spec.id) {\n              <clx-list-item [icon]=\"spec.icon ?? ''\">\n                <div clxContent>\n                  <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                  <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                </div>\n              </clx-list-item>\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n      <ng-template [clxTabPanel]=\"'specs'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsLeft(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsRight(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n      <ng-template [clxTabPanel]=\"'description'\">\n        <div class=\"space-y-5\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n\n    </clx-tabs>\n\n    <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <div class=\"pb-1 space-y-1\">\n            <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n            <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n          </div>\n        </div>\n        <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n        <div class=\"pt-2 space-y-2\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n            Report abuse\n          </button>\n        </div>\n      </div>\n\n      <div class=\"lg:col-span-2 space-y-4\">\n        @for (review of p.reviews ?? []; track review.id) {\n          <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n            <div class=\"flex items-center gap-3 px-4 py-3\">\n              <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-clx-text-muted\">\n                  {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                </span>\n              </div>\n              <div class=\"flex-1 min-w-0\">\n                <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n              </div>\n              @if (review.is_verified) {\n                <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n              }\n            </div>\n            <div class=\"px-4 pb-4 space-y-2\">\n              <div class=\"flex items-center gap-2\">\n                <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                @if (review.title) {\n                  <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n\n  </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], initialVariationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialVariationId", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], addToCart: [{ type: i0.Output, args: ["addToCart"] }], buyNow: [{ type: i0.Output, args: ["buyNow"] }], wishlist: [{ type: i0.Output, args: ["wishlist"] }], variationChange: [{ type: i0.Output, args: ["variationChange"] }], _carousel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClxCarouselComponent), { isSignal: true }] }] } });
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 md:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2014 each column sizes to its own content (no forced equal\n           height, no position:sticky). A `sticky` gallery reads great in isolation, but a host app\n           that already has its own `position: sticky` header (a full-width top bar, as opposed to\n           this library's own `clx-app-layout` sidebar, which is `fixed` and never competes) forces\n           the browser to keep recomputing both stickies' viewport-relative offsets together on every\n           resize \u2014 confirmed as the source of a persistent resize-lag bug in codexly-store's product\n           page. Not worth reintroducing until sticky positioning is made robust to an arbitrary host\n           header. \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"flex flex-col gap-3\">\n        <div class=\"relative aspect-4/3\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track i; let i = $index) {\n              <ng-template clxSlide>\n                <div class=\"w-full h-full p-5 sm:p-12.5 md:p-5 lg:p-12.5\">\n                  <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-contain\"\n                       [loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                       [attr.fetchpriority]=\"i === 0 ? 'high' : null\" />\n                </div>\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Agregar a favoritos\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\"\n                    (click)=\"wishlist.emit()\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track i; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-[border-color,opacity]\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-2.5\">\n\n        <!-- Stock status -->\n        @if (v) {\n          <span clx-badge [variant]=\"v.in_stock ? 'light' : 'solid'\" [color]=\"v.in_stock ? clxColor() : 'green'\" size=\"sm\" shape=\"pill\">\n            @if (v.in_stock) {\n              @if (v.stock_quantity != null) {\n                {{ v.stock_quantity }} en stock\n              } @else {\n                En stock\n              }\n            } @else {\n              Sin stock\n            }\n          </span>\n        }\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-1\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-sm text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ v?.name || p.product_name }}</h1>\n          @if (p.product_detail) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ p.product_detail }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div>\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-2xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'$':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-base text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'$':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) \u2014 opciones no disponibles\n             para la combinaci\u00F3n actual (ej. Talla S con Color Rojo) se ocultan por completo en vez\n             de mostrarse deshabilitadas; reaparecen si el usuario cambia a una combinaci\u00F3n donde s\u00ED\n             aplican, ya que isOptionAvailable() se reeval\u00FAa contra selectedSpecs() en cada cambio. -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                @if (isOptionAvailable(specType.id, opt.id)) {\n                  <button\n                          type=\"button\"\n                          class=\"w-7 h-7 rounded-full border-2 transition-[transform,box-shadow] shrink-0 cursor-pointer\"\n                          [class]=\"isSpecSelected(specType.id, opt.id) ? 'scale-110 shadow-md' : 'opacity-90 hover:opacity-100'\"\n                          [style.background-color]=\"opt.value\"\n                          [style.border-color]=\"isSpecSelected(specType.id, opt.id) ? 'var(--clx-text-label, #111)' : 'transparent'\"\n                          [clxTooltip]=\"opt.label ?? opt.value\"\n                          clxTooltipPosition=\"top\"\n                          (click)=\"selectSpec(specType.id, opt.id)\">\n                  </button>\n                }\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                @if (isOptionAvailable(specType.id, opt.id)) {\n                  <button clx-button\n                          type=\"button\"\n                          [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                          [color]=\"clxColor()\" size=\"sm\"\n                          (click)=\"selectSpec(specType.id, opt.id)\">\n                    {{ opt.label ?? opt.value }}\n                  </button>\n                }\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitBuyNow()\">Comprar ahora</button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitAddToCart()\">Agrega al carrito</button>\n        </div>\n\n      </div>\n    </div>\n\n    @if (!compact()) {\n      <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n        <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n        <ng-template [clxTabPanel]=\"'general'\">\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n            <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n              @for (spec of specsLeft(p.product_specs); track spec.id) {\n                <clx-list-item [icon]=\"spec.icon ?? ''\">\n                  <div clxContent>\n                    <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                    <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                  </div>\n                </clx-list-item>\n              }\n            </clx-list>\n            <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n              @for (spec of specsRight(p.product_specs); track spec.id) {\n                <clx-list-item [icon]=\"spec.icon ?? ''\">\n                  <div clxContent>\n                    <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                    <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                  </div>\n                </clx-list-item>\n              }\n            </clx-list>\n          </div>\n        </ng-template>\n\n        <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n        <ng-template [clxTabPanel]=\"'specs'\">\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n            <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n              @for (st of specsLeft(p.spec_types); track st.id) {\n                <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n              }\n            </clx-list>\n            <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n              @for (st of specsRight(p.spec_types); track st.id) {\n                <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n              }\n            </clx-list>\n          </div>\n        </ng-template>\n\n        <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n        <ng-template [clxTabPanel]=\"'description'\">\n          <div class=\"space-y-5\">\n            @for (block of p.descriptions; track block.id) {\n              <div>\n                @if (block.title) {\n                  <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n                }\n                <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n              </div>\n            }\n          </div>\n        </ng-template>\n\n      </clx-tabs>\n\n      <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n        <div class=\"space-y-3\">\n          <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n          <div class=\"flex items-end gap-3\">\n            <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n            <div class=\"pb-1 space-y-1\">\n              <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n              <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n            </div>\n          </div>\n          <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n          <div class=\"pt-2 space-y-2\">\n            <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n              Leave Us a Review\n            </button>\n            <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n              Report abuse\n            </button>\n          </div>\n        </div>\n\n        <div class=\"lg:col-span-2 space-y-4\">\n          @for (review of p.reviews ?? []; track review.id) {\n            <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n              <div class=\"flex items-center gap-3 px-4 py-3\">\n                <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                  <span class=\"text-sm font-bold text-clx-text-muted\">\n                    {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                  </span>\n                </div>\n                <div class=\"flex-1 min-w-0\">\n                  <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                  <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n                </div>\n                @if (review.is_verified) {\n                  <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n                }\n              </div>\n              <div class=\"px-4 pb-4 space-y-2\">\n                <div class=\"flex items-center gap-2\">\n                  <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                  @if (review.title) {\n                    <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                  }\n                </div>\n                @if (review.body) {\n                  <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n                }\n                <div class=\"flex items-center gap-3 pt-1\">\n                  <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                  <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                  <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n      </div>\n    }\n\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], initialVariationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialVariationId", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], addToCart: [{ type: i0.Output, args: ["addToCart"] }], buyNow: [{ type: i0.Output, args: ["buyNow"] }], wishlist: [{ type: i0.Output, args: ["wishlist"] }], variationChange: [{ type: i0.Output, args: ["variationChange"] }], _carousel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClxCarouselComponent), { isSignal: true }] }] } });
+
+class ClxProductQuickViewComponent {
+    ref = inject(CLX_MODAL_REF, { optional: true });
+    data = inject(CLX_MODAL_DATA, { optional: true });
+    _onAddToCart(event) {
+        this.ref?.close(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductQuickViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: ClxProductQuickViewComponent, isStandalone: true, selector: "clx-product-quick-view", ngImport: i0, template: `
+    <clx-modal>
+      <div clx-modal-title>{{ data?.product?.product_name }}</div>
+
+      <clx-product-detail
+        [compact]="true"
+        [product]="data?.product ?? null"
+        [initialVariationId]="data?.initialVariationId ?? null"
+        [clxColor]="data?.clxColor ?? 'indigo'"
+        [currency]="data?.currency ?? 'COP'"
+        (addToCart)="_onAddToCart($event)">
+      </clx-product-detail>
+    </clx-modal>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxModalComponent, selector: "clx-modal", inputs: ["size", "showClose", "confirmButton", "cancelButton", "showCancelButton"], outputs: ["confirmClick", "cancelClick"] }, { kind: "component", type: ClxProductDetailComponent, selector: "clx-product-detail", inputs: ["product", "initialVariationId", "clxColor", "loading", "currency", "compact"], outputs: ["addToCart", "buyNow", "wishlist", "variationChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductQuickViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-product-quick-view',
+                    standalone: true,
+                    imports: [ClxModalComponent, ClxProductDetailComponent],
+                    template: `
+    <clx-modal>
+      <div clx-modal-title>{{ data?.product?.product_name }}</div>
+
+      <clx-product-detail
+        [compact]="true"
+        [product]="data?.product ?? null"
+        [initialVariationId]="data?.initialVariationId ?? null"
+        [clxColor]="data?.clxColor ?? 'indigo'"
+        [currency]="data?.currency ?? 'COP'"
+        (addToCart)="_onAddToCart($event)">
+      </clx-product-detail>
+    </clx-modal>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
 
 const WISHLIST_PAGE_SIZE_DEFAULT = 6;
 const WISHLIST_SORT_OPTIONS = [
@@ -14709,22 +14731,19 @@ class ClxWishlistComponent {
       <!-- ── Info Bar ─────────────────────────────────────────────────────── -->
       <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
         <div class="flex items-center gap-2">
-          <span class="text-clx-text-muted text-sm">Adding</span>
-          <span class="font-bold text-clx-text-label text-sm">{{ _totalItems() }}</span>
-          <span clx-badge variant="light" [color]="color()" size="sm">items</span>
-          <span class="text-clx-text-muted text-sm">to your wishlist</span>
+          <h2 class="text-base font-semibold text-clx-text-label">Productos</h2>
+          <span clx-badge variant="light" [color]="color()" size="sm">{{ _totalItems() }}</span>
         </div>
         <button
           clx-button
           type="button"
           variant="light"
           [color]="color()"
-          size="sm"
           icon="arrow_forward"
           iconPosition="right"
           [disabled]="_totalItems() === 0"
           (click)="handleCheckoutAll()"
-        >Checkout All</button>
+        >Agregar todo al carrito</button>
       </div>
 
       <!-- ── List ─────────────────────────────────────────────────────────── -->
@@ -14748,11 +14767,14 @@ class ClxWishlistComponent {
 
       } @else if (_pagedItems().length === 0) {
 
-        <div class="flex flex-col items-center justify-center py-20 gap-4 text-clx-text-subtle">
-          <span clx-icon name="heart_broken" size="xl"></span>
-          <p class="text-base font-medium">Your wishlist is empty</p>
-          <p class="text-sm">Start adding items you love!</p>
-        </div>
+        <clx-page-empty
+          icon="favorite"
+          title="Sin favoritos"
+          description="No tienes productos guardados."
+          [ctaColor]="color()"
+          ctaIcon="storefront"
+          ctaLabel="Ir a la tienda">
+      </clx-page-empty>
 
       } @else {
 
@@ -14796,10 +14818,10 @@ class ClxWishlistComponent {
 
                   <!-- Price -->
                   <div class="flex items-baseline gap-2 mt-2">
-                    <span [class]="_priceClass">{{ (item.sale_price ?? item.product_sale_price) | currency:'COP':'symbol':'1.0-0' }}</span>
+                    <span [class]="_priceClass">{{ (item.sale_price ?? item.product_sale_price) | currency:'COP':'$':'1.0-0' }}</span>
                     @if (item.has_discount && item.discount_price) {
                       <span class="text-sm text-clx-text-subtle line-through">
-                        {{ item.discount_price | currency:'COP':'symbol':'1.0-0' }}
+                        {{ item.discount_price | currency:'COP':'$':'1.0-0' }}
                       </span>
                     }
                   </div>
@@ -14861,7 +14883,7 @@ class ClxWishlistComponent {
       }
 
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxPaginationComponent, selector: "clx-pagination", inputs: ["totalItems", "color", "size", "showPageSize", "pageSizeOptions", "currentPage", "pageSize"], outputs: ["currentPageChange", "pageSizeChange", "pageChange", "sizeChange"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxSelectComponent, selector: "clx-select", inputs: ["label", "placeholder", "options", "multiple", "searchable", "searchPlaceholder", "activeColor", "size", "hint", "errorMessage", "disabled", "async", "loadOptions", "debounceMs", "minChars"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "title", "description", "ctaLabel", "ctaIcon", "ctaColor"], outputs: ["cta"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWishlistComponent, decorators: [{
             type: Component,
@@ -14873,12 +14895,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         FormsModule,
                         ClxButtonComponent,
                         ClxBadgeComponent,
-                        ClxIconComponent,
                         ClxSkeletonComponent,
                         ClxPaginationComponent,
                         ClxInputComponent,
                         ClxSelectComponent,
-                        ClxTooltipDirective
+                        ClxTooltipDirective,
+                        ClxPageEmptyComponent
                     ],
                     template: `
     <div class="flex flex-col gap-6">
@@ -14911,22 +14933,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <!-- ── Info Bar ─────────────────────────────────────────────────────── -->
       <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
         <div class="flex items-center gap-2">
-          <span class="text-clx-text-muted text-sm">Adding</span>
-          <span class="font-bold text-clx-text-label text-sm">{{ _totalItems() }}</span>
-          <span clx-badge variant="light" [color]="color()" size="sm">items</span>
-          <span class="text-clx-text-muted text-sm">to your wishlist</span>
+          <h2 class="text-base font-semibold text-clx-text-label">Productos</h2>
+          <span clx-badge variant="light" [color]="color()" size="sm">{{ _totalItems() }}</span>
         </div>
         <button
           clx-button
           type="button"
           variant="light"
           [color]="color()"
-          size="sm"
           icon="arrow_forward"
           iconPosition="right"
           [disabled]="_totalItems() === 0"
           (click)="handleCheckoutAll()"
-        >Checkout All</button>
+        >Agregar todo al carrito</button>
       </div>
 
       <!-- ── List ─────────────────────────────────────────────────────────── -->
@@ -14950,11 +14969,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
       } @else if (_pagedItems().length === 0) {
 
-        <div class="flex flex-col items-center justify-center py-20 gap-4 text-clx-text-subtle">
-          <span clx-icon name="heart_broken" size="xl"></span>
-          <p class="text-base font-medium">Your wishlist is empty</p>
-          <p class="text-sm">Start adding items you love!</p>
-        </div>
+        <clx-page-empty
+          icon="favorite"
+          title="Sin favoritos"
+          description="No tienes productos guardados."
+          [ctaColor]="color()"
+          ctaIcon="storefront"
+          ctaLabel="Ir a la tienda">
+      </clx-page-empty>
 
       } @else {
 
@@ -14998,10 +15020,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
                   <!-- Price -->
                   <div class="flex items-baseline gap-2 mt-2">
-                    <span [class]="_priceClass">{{ (item.sale_price ?? item.product_sale_price) | currency:'COP':'symbol':'1.0-0' }}</span>
+                    <span [class]="_priceClass">{{ (item.sale_price ?? item.product_sale_price) | currency:'COP':'$':'1.0-0' }}</span>
                     @if (item.has_discount && item.discount_price) {
                       <span class="text-sm text-clx-text-subtle line-through">
-                        {{ item.discount_price | currency:'COP':'symbol':'1.0-0' }}
+                        {{ item.discount_price | currency:'COP':'$':'1.0-0' }}
                       </span>
                     }
                   </div>
@@ -15141,11 +15163,14 @@ class ClxCartComponent {
     <!-- ── Empty ───────────────────────────────────────────────────────────────── -->
     } @else if (items().length === 0) {
 
-      <div class="flex flex-col items-center justify-center py-24 gap-4 text-clx-text-subtle">
-        <span clx-icon name="shopping_cart" size="xl"></span>
-        <p class="text-base font-semibold text-clx-text-muted">Tu carrito está vacío</p>
-        <p class="text-sm">Agrega productos para continuar.</p>
-      </div>
+      <clx-page-empty
+        icon="remove_shopping_cart"
+        title="Carrito vacio"
+        description="Tu carrito esta vacio. Agrega productos para continuar."
+        [ctaColor]="color()"
+        ctaIcon="storefront"
+        ctaLabel="Ir a la tienda">
+      </clx-page-empty>
 
     <!-- ── Main layout ─────────────────────────────────────────────────────────── -->
     } @else {
@@ -15158,19 +15183,19 @@ class ClxCartComponent {
           <!-- Top bar -->
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-2">
-              <h2 class="text-base font-semibold text-clx-text-label">Cart Items</h2>
+              <h2 class="text-base font-semibold text-clx-text-label">Productos</h2>
               <span clx-badge variant="light" [color]="color()" size="sm">{{ _totalUnits() }}</span>
             </div>
             <button
-              clx-button type="button" variant="ghost" color="red" size="sm" icon="delete_sweep"
+              clx-button type="button" variant="light" color="red" icon="delete"
               (click)="onClearCart.emit()">
-              Vaciar
+              Vaciar carrito
             </button>
           </div>
 
           <!-- Item cards -->
           @for (item of items(); track item.id) {
-            <article class="bg-clx-surface rounded-2xl shadow-sm flex gap-0 overflow-hidden group transition-[box-shadow,transform] duration-300 hover:shadow-xl hover:-translate-y-0.5">
+            <article class="bg-clx-surface rounded-2xl shadow-sm flex gap-0 overflow-hidden group transition-[box-shadow,transform] duration-300 hover:shadow-md hover:-translate-y-0.5">
 
               <!-- Image — fixed square -->
               <div class="relative shrink-0 w-28 h-28 lg:w-36 lg:h-36 overflow-hidden bg-clx-surface-2">
@@ -15215,54 +15240,29 @@ class ClxCartComponent {
                   <p class="text-xs font-mono text-clx-text-subtle mt-0.5">{{ item.sku }}</p>
                 </div>
 
-                @if (item.rating) {
-                  <div class="flex items-center gap-1.5">
-                    <clx-rating [value]="item.rating" [max]="5" color="amber" />
-                    @if (item.review_count) {
-                      <span class="text-xs text-clx-text-subtle">({{ item.review_count }})</span>
-                    }
-                  </div>
-                }
-
                 <!-- Price + Quantity row -->
                 <div class="flex items-center justify-between gap-2 mt-auto flex-wrap">
 
                   <!-- Price -->
                   <div class="flex items-baseline gap-1.5">
                     <span class="text-base font-bold text-clx-text-label">
-                      {{ item.unit_price | currency:'COP':'symbol':'1.0-0' }}
+                      {{ item.unit_price | currency:'COP':'$':'1.0-0' }}
                     </span>
                     @if (item.has_discount && item.original_price) {
                       <span class="text-xs text-clx-text-subtle line-through">
-                        {{ item.original_price | currency:'COP':'symbol':'1.0-0' }}
+                        {{ item.original_price | currency:'COP':'$':'1.0-0' }}
                       </span>
                     }
                   </div>
 
                   <!-- Quantity control -->
-                  <div class="flex items-center border border-clx-border rounded-xl overflow-hidden">
-                    <button
-                      clx-button type="button" variant="ghost" color="slate" size="sm"
-                      icon="remove" [iconOnly]="true"
-                      [disabled]="item.quantity <= 1"
-                      (click)="onQuantityChange.emit({ item, quantity: item.quantity - 1 })">
-                    </button>
-                    <span class="w-8 text-center text-sm font-semibold text-clx-text-label select-none">
-                      {{ item.quantity }}
-                    </span>
-                    <button
-                      clx-button type="button" variant="ghost" [color]="color()" size="sm"
-                      icon="add" [iconOnly]="true"
-                      [disabled]="!item.in_stock || (!!item.max_quantity && item.quantity >= item.max_quantity)"
-                      (click)="onQuantityChange.emit({ item, quantity: item.quantity + 1 })">
-                    </button>
-                  </div>
-
-                  <!-- Line total -->
-                  <p class="text-sm font-bold text-clx-text-label">
-                    {{ (item.unit_price * item.quantity) | currency:'COP':'symbol':'1.0-0' }}
-                  </p>
-
+                  <clx-number
+                    variant="stepper" size="sm" [color]="color()"
+                    [min]="1" [max]="item.max_quantity ?? null"
+                    [disabled]="!item.in_stock"
+                    [ngModel]="item.quantity"
+                    (ngModelChange)="onQuantityChange.emit({ item, quantity: $event })">
+                  </clx-number>
                 </div>
               </div>
 
@@ -15327,12 +15327,12 @@ class ClxCartComponent {
             <dl class="flex flex-col gap-2.5 text-sm">
               <div class="flex justify-between text-clx-text-muted">
                 <dt>Subtotal <span class="text-clx-text-subtle text-xs">({{ _totalUnits() }} items)</span></dt>
-                <dd class="font-medium">{{ _subtotal() | currency:'COP':'symbol':'1.0-0' }}</dd>
+                <dd class="font-medium">{{ _subtotal() | currency:'COP':'$':'1.0-0' }}</dd>
               </div>
               @if (_savingsAmount() > 0) {
                 <div class="flex justify-between text-emerald-600">
                   <dt>Descuento productos</dt>
-                  <dd class="font-medium">-{{ _savingsAmount() | currency:'COP':'symbol':'1.0-0' }}</dd>
+                  <dd class="font-medium">-{{ _savingsAmount() | currency:'COP':'$':'1.0-0' }}</dd>
                 </div>
               }
               @if (coupon()?.valid) {
@@ -15341,18 +15341,18 @@ class ClxCartComponent {
                     Cupón
                     <code class="bg-emerald-50 px-1 rounded text-xs ml-1">{{ coupon()!.code }}</code>
                   </dt>
-                  <dd class="font-medium">-{{ _couponDiscount() | currency:'COP':'symbol':'1.0-0' }}</dd>
+                  <dd class="font-medium">-{{ _couponDiscount() | currency:'COP':'$':'1.0-0' }}</dd>
                 </div>
               }
               <div class="flex justify-between border-t border-clx-border-soft pt-2.5">
                 <dt class="font-bold text-clx-text-label">Total</dt>
-                <dd class="text-xl font-black text-clx-text-label">{{ _total() | currency:'COP':'symbol':'1.0-0' }}</dd>
+                <dd class="text-lg font-black text-clx-text-label">{{ _total() | currency:'COP':'$':'1.0-0' }}</dd>
               </div>
             </dl>
 
             <!-- Checkout -->
             <button
-              clx-button type="button" [color]="color()" variant="solid" size="lg"
+              clx-button type="button" [color]="color()" variant="solid" size="md"
               icon="arrow_forward" iconPosition="right" [block]="true"
               (click)="onCheckout.emit()">
               Proceder al pago
@@ -15371,7 +15371,7 @@ class ClxCartComponent {
       </div>
 
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxRatingComponent, selector: "clx-rating", inputs: ["value", "max", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "component", type: ClxPageEmptyComponent, selector: "clx-page-empty", inputs: ["icon", "title", "description", "ctaLabel", "ctaIcon", "ctaColor"], outputs: ["cta"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCartComponent, decorators: [{
             type: Component,
@@ -15386,7 +15386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         ClxIconComponent,
                         ClxSkeletonComponent,
                         ClxInputComponent,
-                        ClxRatingComponent,
+                        ClxNumberComponent,
+                        ClxPageEmptyComponent
                     ],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -15421,11 +15422,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     <!-- ── Empty ───────────────────────────────────────────────────────────────── -->
     } @else if (items().length === 0) {
 
-      <div class="flex flex-col items-center justify-center py-24 gap-4 text-clx-text-subtle">
-        <span clx-icon name="shopping_cart" size="xl"></span>
-        <p class="text-base font-semibold text-clx-text-muted">Tu carrito está vacío</p>
-        <p class="text-sm">Agrega productos para continuar.</p>
-      </div>
+      <clx-page-empty
+        icon="remove_shopping_cart"
+        title="Carrito vacio"
+        description="Tu carrito esta vacio. Agrega productos para continuar."
+        [ctaColor]="color()"
+        ctaIcon="storefront"
+        ctaLabel="Ir a la tienda">
+      </clx-page-empty>
 
     <!-- ── Main layout ─────────────────────────────────────────────────────────── -->
     } @else {
@@ -15438,19 +15442,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           <!-- Top bar -->
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-2">
-              <h2 class="text-base font-semibold text-clx-text-label">Cart Items</h2>
+              <h2 class="text-base font-semibold text-clx-text-label">Productos</h2>
               <span clx-badge variant="light" [color]="color()" size="sm">{{ _totalUnits() }}</span>
             </div>
             <button
-              clx-button type="button" variant="ghost" color="red" size="sm" icon="delete_sweep"
+              clx-button type="button" variant="light" color="red" icon="delete"
               (click)="onClearCart.emit()">
-              Vaciar
+              Vaciar carrito
             </button>
           </div>
 
           <!-- Item cards -->
           @for (item of items(); track item.id) {
-            <article class="bg-clx-surface rounded-2xl shadow-sm flex gap-0 overflow-hidden group transition-[box-shadow,transform] duration-300 hover:shadow-xl hover:-translate-y-0.5">
+            <article class="bg-clx-surface rounded-2xl shadow-sm flex gap-0 overflow-hidden group transition-[box-shadow,transform] duration-300 hover:shadow-md hover:-translate-y-0.5">
 
               <!-- Image — fixed square -->
               <div class="relative shrink-0 w-28 h-28 lg:w-36 lg:h-36 overflow-hidden bg-clx-surface-2">
@@ -15495,54 +15499,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                   <p class="text-xs font-mono text-clx-text-subtle mt-0.5">{{ item.sku }}</p>
                 </div>
 
-                @if (item.rating) {
-                  <div class="flex items-center gap-1.5">
-                    <clx-rating [value]="item.rating" [max]="5" color="amber" />
-                    @if (item.review_count) {
-                      <span class="text-xs text-clx-text-subtle">({{ item.review_count }})</span>
-                    }
-                  </div>
-                }
-
                 <!-- Price + Quantity row -->
                 <div class="flex items-center justify-between gap-2 mt-auto flex-wrap">
 
                   <!-- Price -->
                   <div class="flex items-baseline gap-1.5">
                     <span class="text-base font-bold text-clx-text-label">
-                      {{ item.unit_price | currency:'COP':'symbol':'1.0-0' }}
+                      {{ item.unit_price | currency:'COP':'$':'1.0-0' }}
                     </span>
                     @if (item.has_discount && item.original_price) {
                       <span class="text-xs text-clx-text-subtle line-through">
-                        {{ item.original_price | currency:'COP':'symbol':'1.0-0' }}
+                        {{ item.original_price | currency:'COP':'$':'1.0-0' }}
                       </span>
                     }
                   </div>
 
                   <!-- Quantity control -->
-                  <div class="flex items-center border border-clx-border rounded-xl overflow-hidden">
-                    <button
-                      clx-button type="button" variant="ghost" color="slate" size="sm"
-                      icon="remove" [iconOnly]="true"
-                      [disabled]="item.quantity <= 1"
-                      (click)="onQuantityChange.emit({ item, quantity: item.quantity - 1 })">
-                    </button>
-                    <span class="w-8 text-center text-sm font-semibold text-clx-text-label select-none">
-                      {{ item.quantity }}
-                    </span>
-                    <button
-                      clx-button type="button" variant="ghost" [color]="color()" size="sm"
-                      icon="add" [iconOnly]="true"
-                      [disabled]="!item.in_stock || (!!item.max_quantity && item.quantity >= item.max_quantity)"
-                      (click)="onQuantityChange.emit({ item, quantity: item.quantity + 1 })">
-                    </button>
-                  </div>
-
-                  <!-- Line total -->
-                  <p class="text-sm font-bold text-clx-text-label">
-                    {{ (item.unit_price * item.quantity) | currency:'COP':'symbol':'1.0-0' }}
-                  </p>
-
+                  <clx-number
+                    variant="stepper" size="sm" [color]="color()"
+                    [min]="1" [max]="item.max_quantity ?? null"
+                    [disabled]="!item.in_stock"
+                    [ngModel]="item.quantity"
+                    (ngModelChange)="onQuantityChange.emit({ item, quantity: $event })">
+                  </clx-number>
                 </div>
               </div>
 
@@ -15607,12 +15586,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             <dl class="flex flex-col gap-2.5 text-sm">
               <div class="flex justify-between text-clx-text-muted">
                 <dt>Subtotal <span class="text-clx-text-subtle text-xs">({{ _totalUnits() }} items)</span></dt>
-                <dd class="font-medium">{{ _subtotal() | currency:'COP':'symbol':'1.0-0' }}</dd>
+                <dd class="font-medium">{{ _subtotal() | currency:'COP':'$':'1.0-0' }}</dd>
               </div>
               @if (_savingsAmount() > 0) {
                 <div class="flex justify-between text-emerald-600">
                   <dt>Descuento productos</dt>
-                  <dd class="font-medium">-{{ _savingsAmount() | currency:'COP':'symbol':'1.0-0' }}</dd>
+                  <dd class="font-medium">-{{ _savingsAmount() | currency:'COP':'$':'1.0-0' }}</dd>
                 </div>
               }
               @if (coupon()?.valid) {
@@ -15621,18 +15600,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     Cupón
                     <code class="bg-emerald-50 px-1 rounded text-xs ml-1">{{ coupon()!.code }}</code>
                   </dt>
-                  <dd class="font-medium">-{{ _couponDiscount() | currency:'COP':'symbol':'1.0-0' }}</dd>
+                  <dd class="font-medium">-{{ _couponDiscount() | currency:'COP':'$':'1.0-0' }}</dd>
                 </div>
               }
               <div class="flex justify-between border-t border-clx-border-soft pt-2.5">
                 <dt class="font-bold text-clx-text-label">Total</dt>
-                <dd class="text-xl font-black text-clx-text-label">{{ _total() | currency:'COP':'symbol':'1.0-0' }}</dd>
+                <dd class="text-lg font-black text-clx-text-label">{{ _total() | currency:'COP':'$':'1.0-0' }}</dd>
               </div>
             </dl>
 
             <!-- Checkout -->
             <button
-              clx-button type="button" [color]="color()" variant="solid" size="lg"
+              clx-button type="button" [color]="color()" variant="solid" size="md"
               icon="arrow_forward" iconPosition="right" [block]="true"
               (click)="onCheckout.emit()">
               Proceder al pago
@@ -15695,7 +15674,7 @@ class ClxCartSummaryDrawer {
                 <p class="text-xs text-clx-text-subtle">x{{ item.quantity }}</p>
               </div>
               <span class="text-sm font-semibold text-clx-text-label shrink-0">
-                {{ (item.unit_price * item.quantity) | currency:'COP':'symbol':'1.0-0' }}
+                {{ (item.unit_price * item.quantity) | currency:'COP':'$':'1.0-0' }}
               </span>
             </li>
           }
@@ -15708,12 +15687,12 @@ class ClxCartSummaryDrawer {
         <dl class="space-y-2">
           <div class="flex justify-between text-sm text-clx-text-muted">
             <dt>Subtotal</dt>
-            <dd class="font-medium">{{ data.subtotal | currency:'COP':'symbol':'1.0-0' }}</dd>
+            <dd class="font-medium">{{ data.subtotal | currency:'COP':'$':'1.0-0' }}</dd>
           </div>
           @if (data.savingsAmount > 0) {
             <div class="flex justify-between text-sm text-emerald-600">
               <dt>Descuento</dt>
-              <dd class="font-medium">-{{ data.savingsAmount | currency:'COP':'symbol':'1.0-0' }}</dd>
+              <dd class="font-medium">-{{ data.savingsAmount | currency:'COP':'$':'1.0-0' }}</dd>
             </div>
           }
           @if (data.coupon?.valid) {
@@ -15722,12 +15701,12 @@ class ClxCartSummaryDrawer {
                 Cupón
                 <code class="bg-emerald-50 px-1 rounded text-xs ml-1">{{ data.coupon!.code }}</code>
               </dt>
-              <dd class="font-medium">-{{ data.couponDiscount | currency:'COP':'symbol':'1.0-0' }}</dd>
+              <dd class="font-medium">-{{ data.couponDiscount | currency:'COP':'$':'1.0-0' }}</dd>
             </div>
           }
           <div class="border-t border-clx-border-soft pt-2 flex justify-between">
             <dt class="font-bold text-clx-text-label">Total</dt>
-            <dd class="text-xl font-black text-clx-text-label">{{ data.total | currency:'COP':'symbol':'1.0-0' }}</dd>
+            <dd class="text-xl font-black text-clx-text-label">{{ data.total | currency:'COP':'$':'1.0-0' }}</dd>
           </div>
         </dl>
 
@@ -15784,7 +15763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 <p class="text-xs text-clx-text-subtle">x{{ item.quantity }}</p>
               </div>
               <span class="text-sm font-semibold text-clx-text-label shrink-0">
-                {{ (item.unit_price * item.quantity) | currency:'COP':'symbol':'1.0-0' }}
+                {{ (item.unit_price * item.quantity) | currency:'COP':'$':'1.0-0' }}
               </span>
             </li>
           }
@@ -15797,12 +15776,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <dl class="space-y-2">
           <div class="flex justify-between text-sm text-clx-text-muted">
             <dt>Subtotal</dt>
-            <dd class="font-medium">{{ data.subtotal | currency:'COP':'symbol':'1.0-0' }}</dd>
+            <dd class="font-medium">{{ data.subtotal | currency:'COP':'$':'1.0-0' }}</dd>
           </div>
           @if (data.savingsAmount > 0) {
             <div class="flex justify-between text-sm text-emerald-600">
               <dt>Descuento</dt>
-              <dd class="font-medium">-{{ data.savingsAmount | currency:'COP':'symbol':'1.0-0' }}</dd>
+              <dd class="font-medium">-{{ data.savingsAmount | currency:'COP':'$':'1.0-0' }}</dd>
             </div>
           }
           @if (data.coupon?.valid) {
@@ -15811,12 +15790,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 Cupón
                 <code class="bg-emerald-50 px-1 rounded text-xs ml-1">{{ data.coupon!.code }}</code>
               </dt>
-              <dd class="font-medium">-{{ data.couponDiscount | currency:'COP':'symbol':'1.0-0' }}</dd>
+              <dd class="font-medium">-{{ data.couponDiscount | currency:'COP':'$':'1.0-0' }}</dd>
             </div>
           }
           <div class="border-t border-clx-border-soft pt-2 flex justify-between">
             <dt class="font-bold text-clx-text-label">Total</dt>
-            <dd class="text-xl font-black text-clx-text-label">{{ data.total | currency:'COP':'symbol':'1.0-0' }}</dd>
+            <dd class="text-xl font-black text-clx-text-label">{{ data.total | currency:'COP':'$':'1.0-0' }}</dd>
           </div>
         </dl>
 
@@ -16269,5 +16248,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map