diff --git a/resources/js/components/card/ProductCard.vue b/resources/js/components/card/ProductCard.vue
new file mode 100644
index 0000000..8aaf6f6
--- /dev/null
+++ b/resources/js/components/card/ProductCard.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { formatRupiah } from '@/lib/rupiah';
+import type { Product } from '@/types/product';
+
+defineProps<{
+    product: Product;
+    indexOffset?: number;
+}>();
+
+const emit = defineEmits<{
+    quickView: [product: Product];
+}>();
+
+const getProductImage = (product: Product, indexOffset = 0) => {
+    for (const variant of product.variants) {
+        if (variant.images && variant.images.length > 0) {
+            return variant.images[0].url;
+        }
+    }
+
+    const firstCat = product.categories?.[0]?.slug || '';
+    const fallbacks: Record<string, string[]> = {
+        'daster': [
+            'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80',
+            'https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?w=800&auto=format&fit=crop&q=80'
+        ],
+        'setelan-celana': [
+            'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=800&auto=format&fit=crop&q=80',
+            'https://images.unsplash.com/photo-1618244972963-dbee1a7edc95?w=800&auto=format&fit=crop&q=80'
+        ],
+        'atasan': [
+            'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800&auto=format&fit=crop&q=80',
+            'https://images.unsplash.com/photo-1532244769068-b223ede82d7b?w=800&auto=format&fit=crop&q=80'
+        ],
+        'bawahan': [
+            'https://images.unsplash.com/photo-1583496661160-fb4886b36ca7?w=800&auto=format&fit=crop&q=80',
+            'https://images.unsplash.com/photo-1551163943-3f6a855d1153?w=800&auto=format&fit=crop&q=80'
+        ],
+        'busui': [
+            'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&auto=format&fit=crop&q=80',
+            'https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=800&auto=format&fit=crop&q=80'
+        ]
+    };
+
+    const categoryUrls = fallbacks[firstCat] || [
+        'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=800&auto=format&fit=crop&q=80',
+        'https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=800&auto=format&fit=crop&q=80'
+    ];
+
+    return categoryUrls[indexOffset % categoryUrls.length];
+};
+
+const getProductPriceRange = (product: Product) => {
+    const prices = product.variants.flatMap(v =>
+        v.prices.filter(p => p.type === 'ecer').map(p => p.price)
+    );
+
+    if (prices.length === 0) {
+        const fallbackPrices = product.variants.flatMap(v => v.prices.map(p => p.price));
+
+        if (fallbackPrices.length === 0) {
+            return 'Rp 0';
+        }
+
+        const min = Math.min(...fallbackPrices);
+        const max = Math.max(...fallbackPrices);
+
+        return min === max ? `Rp ${formatRupiah(min)}` : `Rp ${formatRupiah(min)} - Rp ${formatRupiah(max)}`;
+    }
+
+    const min = Math.min(...prices);
+    const max = Math.max(...prices);
+
+    return min === max ? `Rp ${formatRupiah(min)}` : `Rp ${formatRupiah(min)} - Rp ${formatRupiah(max)}`;
+};
+
+const getTotalStock = (product: Product) => {
+    return product.variants.reduce((acc, variant) => acc + variant.stock, 0);
+};
+</script>
+
+<template>
+    <div class="group relative flex flex-col space-y-4 cursor-pointer" @click="emit('quickView', product)">
+        <!-- Product Image Container -->
+        <div
+            class="relative aspect-3/4 w-full overflow-hidden rounded-2xl bg-amber-50/50 shadow-md transition-shadow hover">
+            <img :src="getProductImage(product, indexOffset ?? 0)" :alt="product.name"
+                class="h-full w-full object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105" />
+            <div
+                class="absolute inset-0 bg-linear-to-t from-amber-950/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+            </div>
+
+            <!-- Status Badges -->
+            <div class="absolute top-4 left-4 flex flex-col space-y-2">
+                <span v-if="getTotalStock(product) === 0"
+                    class="bg-red-500 text-white text-[9px] font-bold uppercase tracking-wider px-3 py-1 rounded-md">
+                    Habis
+                </span>
+                <span v-else-if="getTotalStock(product) < 15"
+                    class="bg-amber-500 text-white text-[9px] font-bold uppercase tracking-wider px-3 py-1 rounded-md animate-pulse">
+                    Menipis
+                </span>
+                <span v-else
+                    class="bg-amber-600 text-white text-[9px] font-bold uppercase tracking-wider px-3 py-1 rounded-md">
+                    Terbaru
+                </span>
+            </div>
+        </div>
+
+        <!-- Product Details Info -->
+        <div class="flex flex-col space-y-2">
+            <!-- Category Badges -->
+            <div class="flex flex-wrap gap-1.5">
+                <span v-for="cat in product.categories" :key="cat.id"
+                    class="inline-block text-[9px] font-bold uppercase tracking-widest text-amber-700 bg-amber-100/60 px-2 py-0.5 rounded-full">
+                    {{ cat.name }}
+                </span>
+            </div>
+
+            <h4 class="text-base font-semibold text-slate-700 line-clamp-1 group-hover transition-colors">
+                {{ product.name }}
+            </h4>
+            <p class="text-sm font-bold text-amber-600">
+                {{ getProductPriceRange(product) }}
+            </p>
+            <span class="text-[11px] text-slate-400 font-light mt-0.5">
+                Ukuran tersedia: {{ product.variants.map(v => v.name).join(', ') }}
+            </span>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/modal/ProductModal.vue b/resources/js/components/modal/ProductModal.vue
new file mode 100644
index 0000000..a5abdb3
--- /dev/null
+++ b/resources/js/components/modal/ProductModal.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { X } from '@lucide/vue';
+import { ref, computed, watch } from 'vue';
+import { formatRupiah } from '@/lib/rupiah';
+import type { Product, Variant, Price, MediaItem } from '@/types/product';
+
+const props = defineProps<{
+    product: Product | null;
+}>();
+
+const emit = defineEmits<{
+    close: [];
+    addToCart: [product: Product, variant: Variant, price: Price];
+}>();
+
+const activeVariant = ref<Variant | null>(null);
+const activePriceType = ref<string>('ecer');
+const activeImageIndex = ref(0);
+
+const allImages = computed<MediaItem[]>(() => {
+    if (!props.product) {
+        return [];
+    }
+
+    return props.product.variants.flatMap(v => v.images);
+});
+
+const mainImage = computed(() => {
+    if (allImages.value.length > 0) {
+        const img = allImages.value[activeImageIndex.value];
+
+        if (img) {
+            return img.url;
+        }
+    }
+
+    return getFallbackImage();
+});
+
+watch(() => props.product, (newProduct) => {
+    if (newProduct) {
+        activeVariant.value = newProduct.variants[0] || null;
+        activePriceType.value = 'ecer';
+        activeImageIndex.value = 0;
+    } else {
+        activeVariant.value = null;
+    }
+});
+
+const selectedPrice = computed(() => {
+    if (!activeVariant.value) {
+        return null;
+    }
+
+    return activeVariant.value.prices.find(p => p.type === activePriceType.value) || activeVariant.value.prices[0] || null;
+});
+
+const getFallbackImage = () => {
+    if (!props.product) {
+        return '';
+    }
+
+    const firstCat = props.product.categories?.[0]?.slug || '';
+    const fallbacks: Record<string, string[]> = {
+        'daster': [
+            'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80',
+        ],
+        'setelan-celana': [
+            'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=800&auto=format&fit=crop&q=80',
+        ],
+        'atasan': [
+            'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800&auto=format&fit=crop&q=80',
+        ],
+        'bawahan': [
+            'https://images.unsplash.com/photo-1583496661160-fb4886b36ca7?w=800&auto=format&fit=crop&q=80',
+        ],
+        'busui': [
+            'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&auto=format&fit=crop&q=80',
+        ]
+    };
+
+    const categoryUrls = fallbacks[firstCat] || [
+        'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=800&auto=format&fit=crop&q=80',
+    ];
+
+    return categoryUrls[0];
+};
+
+const handleAddToCart = () => {
+    if (props.product && activeVariant.value && selectedPrice.value) {
+        emit('addToCart', props.product, activeVariant.value, selectedPrice.value);
+    }
+};
+</script>
+
+<template>
+    <div v-if="product"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-opacity duration-300"
+        @click.self="emit('close')">
+        <div
+            class="w-full max-w-3xl bg-[#FDFDFC] rounded-3xl p-6 md:p-8 shadow-2xl flex flex-col md:flex-row gap-8 max-h-[90vh] overflow-y-auto border border-amber-100/30 scrollbar-thin">
+            <!-- Image Side -->
+            <div class="w-full md:w-1/2 flex flex-col space-y-3">
+                <div
+                    class="aspect-3/4 rounded-2xl overflow-hidden bg-slate-50 border border-slate-200/50 shadow-sm relative">
+                    <img :src="mainImage" :alt="product.name" class="w-full h-full object-cover" />
+                </div>
+
+                <!-- Image Thumbnails -->
+                <div v-if="allImages.length > 1" class="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
+                    <button v-for="(img, idx) in allImages" :key="img.id"
+                        @click="activeImageIndex = idx" :class="[
+                            'shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all cursor-pointer',
+                            activeImageIndex === idx
+                                ? 'border-amber-500 shadow-md shadow-amber-200/40'
+                                : 'border-slate-200/60 opacity-60 hover:opacity-100'
+                        ]">
+                        <img :src="img.thumb_url || img.url" :alt="`Gambar ${idx + 1}`"
+                            class="w-full h-full object-cover" />
+                    </button>
+                </div>
+            </div>
+
+            <!-- Info Side -->
+            <div class="w-full md:w-1/2 flex flex-col justify-between space-y-6 text-left">
+                <div class="space-y-4">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <span class="text-[10px] font-bold uppercase tracking-widest text-amber-600">
+                                {{product.categories.map(c => c.name).join(', ')}}
+                            </span>
+                            <h3 class="text-2xl font-serif mt-0.5 text-slate-800">{{ product.name }}</h3>
+                        </div>
+                        <button @click="emit('close')"
+                            class="p-1.5 rounded-full hover:bg-slate-100 transition-colors cursor-pointer">
+                            <X class="w-5 h-5 text-slate-500" />
+                        </button>
+                    </div>
+
+                    <!-- Description -->
+                    <div class="space-y-1.5">
+                        <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Deskripsi</h4>
+                        <p
+                            class="text-xs text-slate-500 font-light leading-relaxed max-h-32 overflow-y-auto scrollbar-thin pr-1">
+                            {{ product.description || `Pakaian batik modern dan nyaman hasil karya perajin
+                            terbaik kami.Menggunakan serat kain pilihan yang awet dan menyejukkan kulit.` }}
+                        </p>
+                    </div>
+
+                    <!-- Variant Select -->
+                    <div v-if="product.variants.length > 0" class="space-y-2">
+                        <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Pilih Ukuran /
+                            Varian</h4>
+                        <div class="flex flex-wrap gap-1.5">
+                            <button v-for="variant in product.variants" :key="variant.id"
+                                @click="activeVariant = variant" :class="[
+                                    'px-3 py-1.5 rounded-xl text-xs font-semibold uppercase tracking-wider border cursor-pointer transition-all',
+                                    activeVariant?.id === variant.id
+                                        ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/30'
+                                        : 'bg-transparent text-slate-600 border-slate-200/60'
+                                ]">
+                                {{ variant.name }}
+                                <span class="text-[9px] opacity-70 ml-1">({{ variant.stock }} pcs)</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Price Tiers -->
+                    <div v-if="activeVariant && activeVariant.prices.length > 0" class="space-y-2">
+                        <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Saluran Harga
+                            (Grosir/Eceran)</h4>
+                        <div class="grid grid-cols-2 gap-1.5 max-h-36 overflow-y-auto scrollbar-thin pr-1">
+                            <button v-for="price in activeVariant.prices" :key="price.id"
+                                @click="activePriceType = price.type" :class="[
+                                    'px-3 py-2 text-left rounded-xl border transition-all cursor-pointer',
+                                    activePriceType === price.type
+                                        ? 'border-amber-500 bg-amber-500/5/5'
+                                        : 'border-slate-200/60 hover'
+                                ]">
+                                <span class="block text-[8px] uppercase tracking-wider font-bold text-slate-400">
+                                    {{ price.type_label }}
+                                </span>
+                                <span class="block text-xs font-bold mt-0.5 text-amber-600">
+                                    {{ `Rp ${formatRupiah(price.price)}` }}
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Cart Call to Action -->
+                <div class="pt-4 border-t border-slate-100/50 space-y-4">
+                    <div class="flex justify-between items-center text-xs">
+                        <div>
+                            <span class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Harga
+                                Terpilih</span>
+                            <div class="text-xl font-bold text-amber-600 mt-0.5">
+                                {{ selectedPrice ? `Rp ${formatRupiah(selectedPrice.price)}` : 'Pilih ukuran' }}
+                            </div>
+                        </div>
+                        <div class="text-right">
+                            <span class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Sisa
+                                Stok</span>
+                            <div class="font-semibold text-slate-700 mt-0.5">
+                                {{ activeVariant ? `${activeVariant.stock} pcs` : 'Pilih ukuran' }}
+                            </div>
+                        </div>
+                    </div>
+
+                    <button v-if="activeVariant && selectedPrice" @click="handleAddToCart"
+                        :disabled="activeVariant.stock <= 0" :class="[
+                            'w-full py-3.5 text-xs font-bold uppercase tracking-widest rounded-xl transition-all cursor-pointer shadow-md',
+                            activeVariant.stock > 0
+                                ? 'bg-amber-600 text-white hover:bg-amber-500 shadow-amber-200/50'
+                                : 'bg-slate-100 text-slate-400 cursor-not-allowed shadow-none'
+                        ]">
+                        {{ activeVariant.stock > 0 ? 'Masukkan ke Keranjang' : 'Stok Habis' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+</style>
diff --git a/resources/js/components/ui/carousel/DraggableCarousel.vue b/resources/js/components/ui/carousel/DraggableCarousel.vue
new file mode 100644
index 0000000..b5e2d63
--- /dev/null
+++ b/resources/js/components/ui/carousel/DraggableCarousel.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ChevronLeft, ChevronRight } from '@lucide/vue';
+import { ref, onMounted, nextTick } from 'vue';
+
+const track = ref<HTMLElement | null>(null);
+const canScrollLeft = ref(false);
+const canScrollRight = ref(false);
+
+// Drag state
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragScrollStart = ref(0);
+const hasDragged = ref(false);
+let dragRafId = 0;
+
+const updateScrollButtons = () => {
+    const el = track.value;
+
+    if (!el) {
+        return;
+    }
+
+    canScrollLeft.value = el.scrollLeft > 4;
+    canScrollRight.value = el.scrollLeft + el.clientWidth < el.scrollWidth - 4;
+};
+
+const scrollTo = (direction: 'left' | 'right') => {
+    const el = track.value;
+
+    if (!el) {
+        return;
+    }
+
+    const amount = el.clientWidth * 0.6;
+    el.style.scrollBehavior = 'smooth';
+    el.scrollBy({ left: direction === 'left' ? -amount : amount });
+
+    requestAnimationFrame(() => {
+        el.style.scrollBehavior = '';
+    });
+};
+
+const onDragStart = (e: MouseEvent | TouchEvent) => {
+    const el = track.value;
+
+    if (!el) {
+        return;
+    }
+
+    isDragging.value = true;
+    hasDragged.value = false;
+    dragStartX.value = 'touches' in e ? e.touches[0].pageX : e.pageX;
+    dragScrollStart.value = el.scrollLeft;
+};
+
+const onDragMove = (e: MouseEvent | TouchEvent) => {
+    if (!isDragging.value) {
+        return;
+    }
+
+    e.preventDefault();
+
+    const el = track.value;
+
+    if (!el) {
+        return;
+    }
+
+    const currentX = 'touches' in e ? e.touches[0].pageX : e.pageX;
+    const delta = currentX - dragStartX.value;
+
+    if (Math.abs(delta) > 3) {
+        hasDragged.value = true;
+    }
+
+    cancelAnimationFrame(dragRafId);
+    dragRafId = requestAnimationFrame(() => {
+        el.scrollLeft = dragScrollStart.value - delta;
+    });
+};
+
+const onDragEnd = () => {
+    isDragging.value = false;
+    cancelAnimationFrame(dragRafId);
+    nextTick(() => updateScrollButtons());
+};
+
+const preventClick = (e: Event) => {
+    if (hasDragged.value) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+};
+
+onMounted(() => {
+    nextTick(() => updateScrollButtons());
+});
+
+defineExpose({ updateScrollButtons });
+</script>
+
+<template>
+    <div class="relative flex items-center min-w-0">
+        <button v-show="canScrollLeft" @click="scrollTo('left')"
+            class="absolute left-0 z-10 flex items-center justify-center w-7 h-7 rounded-full bg-white/90 border border-slate-200 shadow-sm hover:bg-amber-50 hover:border-amber-300 transition-all cursor-pointer -ml-1">
+            <ChevronLeft class="w-4 h-4 text-slate-500" />
+        </button>
+
+        <div ref="track" @scroll="updateScrollButtons"
+            @mousedown="onDragStart" @mousemove="onDragMove" @mouseup="onDragEnd" @mouseleave="onDragEnd"
+            @touchstart.passive="onDragStart" @touchmove="onDragMove" @touchend="onDragEnd"
+            @click.capture="preventClick"
+            class="flex gap-2 overflow-x-auto scrollbar-hide px-1 py-1 select-none touch-pan-y will-change-scroll"
+            :class="[
+                { 'mx-8': canScrollLeft || canScrollRight },
+                isDragging ? 'cursor-grabbing' : 'cursor-grab'
+            ]">
+            <slot />
+        </div>
+
+        <button v-show="canScrollRight" @click="scrollTo('right')"
+            class="absolute right-0 z-10 flex items-center justify-center w-7 h-7 rounded-full bg-white/90 border border-slate-200 shadow-sm hover:bg-amber-50 hover:border-amber-300 transition-all cursor-pointer -mr-1">
+            <ChevronRight class="w-4 h-4 text-slate-500" />
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+</style>
diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
index d3e6f3c..83e11f3 100644
--- a/resources/js/pages/Home.vue
+++ b/resources/js/pages/Home.vue
@@ -11,68 +11,18 @@ import {
     Check,
     Info,
     ChevronRight,
-    Eye,
     Phone,
     MapPin,
     Mail,
-    Filter,
     LogIn
 } from '@lucide/vue';
 import { ref, computed } from 'vue';
-import { CatalogSortOption } from '@/constants/catalog-sort-option';
-import RupiahInput from '@/components/form/rupiah-input/RupiahInput.vue';
-import Select from '@/components/ui/select/Select.vue';
-import SelectContent from '@/components/ui/select/SelectContent.vue';
-import SelectItem from '@/components/ui/select/SelectItem.vue';
-import SelectTrigger from '@/components/ui/select/SelectTrigger.vue';
-import SelectValue from '@/components/ui/select/SelectValue.vue';
-
-interface Price {
-    id: number;
-    variant_id: number;
-    type: string;
-    price: number;
-    price_formatted: string;
-    type_label: string;
-}
-
-interface MediaItem {
-    id: number;
-    url: string;
-    thumb_url: string;
-}
-
-interface Variant {
-    id: number;
-    product_id: number;
-    name: string;
-    stock: number;
-    prices: Price[];
-    images: MediaItem[];
-}
-
-interface Category {
-    id: number;
-    name: string;
-    slug: string;
-}
-
-interface Product {
-    id: number;
-    name: string;
-    slug: string;
-    description: string | null;
-    is_active: boolean;
-    categories: Category[];
-    variants: Variant[];
-}
-
-interface MediaItem {
-    id: number;
-    url: string;
-    thumb_url: string;
-}
-
+import ProductCard from '@/components/card/ProductCard.vue';
+import ProductModal from '@/components/modal/ProductModal.vue';
+import DraggableCarousel from '@/components/ui/carousel/DraggableCarousel.vue';
+import { formatRupiah } from '@/lib/rupiah';
+import admin from '@/routes/admin';
+import type { Product, Variant, Price, Category, MediaItem } from '@/types/product';
 interface HomepageData {
     hero_image_url: string | null;
     about_image_url: string | null;
@@ -97,10 +47,6 @@ const props = defineProps<{
 // Search & Catalog Filter State
 const searchInput = ref('');
 const selectedCategory = ref<string | null>(null);
-const minPrice = ref<number | null>(null);
-const maxPrice = ref<number | null>(null);
-const sortBy = ref<string>(CatalogSortOption.DEFAULT);
-const showFilters = ref(false);
 
 // Hardcoded order steps
 const orderSteps = [
@@ -122,21 +68,6 @@ const toggleCategory = (slug: string) => {
     selectedCategory.value = selectedCategory.value === slug ? null : slug;
 };
 
-// Helper to get ecer price of a product for filtering/sorting
-const getPrimaryEcerPrice = (product: Product): number => {
-    const ecerPrices = product.variants.flatMap(v =>
-        v.prices.filter(p => p.type === 'ecer').map(p => p.price)
-    );
-
-    if (ecerPrices.length > 0) {
-        return Math.min(...ecerPrices);
-    }
-
-    const allPrices = product.variants.flatMap(v => v.prices.map(p => p.price));
-
-    return allPrices.length > 0 ? Math.min(...allPrices) : 0;
-};
-
 // Filtered and Sorted Products
 const filteredProducts = computed(() => {
     const result = props.products.filter(product => {
@@ -148,23 +79,9 @@ const filteredProducts = computed(() => {
         const matchesCategory = !selectedCategory.value ||
             product.categories.some(cat => cat.slug === selectedCategory.value);
 
-        // Price filter
-        const price = getPrimaryEcerPrice(product);
-        const matchesMinPrice = minPrice.value === null || price >= minPrice.value;
-        const matchesMaxPrice = maxPrice.value === null || price <= maxPrice.value;
-
-        return matchesSearch && matchesCategory && matchesMinPrice && matchesMaxPrice;
+        return matchesSearch && matchesCategory;
     });
 
-    // Sorting
-    if (sortBy.value === CatalogSortOption.PRICE_ASC) {
-        result.sort((a, b) => getPrimaryEcerPrice(a) - getPrimaryEcerPrice(b));
-    } else if (sortBy.value === CatalogSortOption.PRICE_DESC) {
-        result.sort((a, b) => getPrimaryEcerPrice(b) - getPrimaryEcerPrice(a));
-    } else if (sortBy.value === CatalogSortOption.NAME_ASC) {
-        result.sort((a, b) => a.name.localeCompare(b.name));
-    }
-
     return result;
 });
 
@@ -209,11 +126,6 @@ const getProductImage = (product: Product, indexOffset = 0) => {
     return categoryUrls[indexOffset % categoryUrls.length];
 };
 
-// Price Formatting (Indonesian Rupiah)
-const formatPrice = (price: number) => {
-    return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(price);
-};
-
 // Price Range Resolver
 const getProductPriceRange = (product: Product) => {
     const prices = product.variants.flatMap(v =>
@@ -224,23 +136,19 @@ const getProductPriceRange = (product: Product) => {
         const fallbackPrices = product.variants.flatMap(v => v.prices.map(p => p.price));
 
         if (fallbackPrices.length === 0) {
-return 'Rp 0';
-}
+            return 'Rp 0';
+        }
 
         const min = Math.min(...fallbackPrices);
         const max = Math.max(...fallbackPrices);
 
-        return min === max ? formatPrice(min) : `${formatPrice(min)} - ${formatPrice(max)}`;
+        return min === max ? `Rp ${formatRupiah(min)}` : `Rp ${formatRupiah(min)} - Rp ${formatRupiah(max)}`;
     }
 
     const min = Math.min(...prices);
     const max = Math.max(...prices);
 
-    return min === max ? formatPrice(min) : `${formatPrice(min)} - ${formatPrice(max)}`;
-};
-
-const getTotalStock = (product: Product) => {
-    return product.variants.reduce((acc, variant) => acc + variant.stock, 0);
+    return min === max ? `Rp ${formatRupiah(min)}` : `Rp ${formatRupiah(min)} - Rp ${formatRupiah(max)}`;
 };
 
 const featuredProducts = computed(() => {
@@ -304,35 +212,22 @@ const cartCount = computed(() => {
 
 // Centered Modal State
 const activeProduct = ref<Product | null>(null);
-const activeVariant = ref<Variant | null>(null);
-const activePriceType = ref<string>('ecer');
 
 const openQuickView = (product: Product) => {
     activeProduct.value = product;
-    activeVariant.value = product.variants[0] || null;
-    activePriceType.value = 'ecer';
 };
 
 const closeQuickView = () => {
     activeProduct.value = null;
-    activeVariant.value = null;
 };
 
-const selectedPrice = computed(() => {
-    if (!activeVariant.value) {
-return null;
-}
-
-    return activeVariant.value.prices.find(p => p.type === activePriceType.value) || activeVariant.value.prices[0] || null;
-});
-
 // Checkout Mock / WhatsApp redirect
 const isCheckingOut = ref(false);
 
 const handleWhatsAppCheckout = () => {
     if (cart.value.length === 0) {
-return;
-}
+        return;
+    }
 
     isCheckingOut.value = true;
 
@@ -343,9 +238,9 @@ return;
         message += `   - Varian/Ukuran: ${item.variant.name}\n`;
         message += `   - Jenis Harga: ${item.price.type_label}\n`;
         message += `   - Jumlah: ${item.quantity} pcs\n`;
-        message += `   - Subtotal: ${formatPrice(item.price.price * item.quantity)}\n\n`;
+        message += `   - Subtotal: Rp ${formatRupiah(item.price.price * item.quantity)}\n\n`;
     });
-    message += `*Total Pembayaran: ${formatPrice(cartTotal.value)}*\n\n`;
+    message += `*Total Pembayaran: Rp ${formatRupiah(cartTotal.value)}*\n\n`;
     message += `Mohon info untuk detail rekening transfer dan pengirimannya. Terima kasih!`;
 
     const formattedPhone = props.contactPhone.replace(/[^0-9]/g, '');
@@ -358,22 +253,17 @@ return;
     }, 800);
 };
 
-const resetPriceFilters = () => {
-    minPrice.value = null;
-    maxPrice.value = null;
-    sortBy.value = CatalogSortOption.DEFAULT;
-};
-
-
 </script>
 
 <template>
+
     <Head :title="`${appName} | Galeri Pakaian Modern & Sejuk`">
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
     </Head>
 
-    <div class="min-h-screen bg-gradient-to-tr from-amber-50/20 via-[#FDFDFC] to-yellow-50/30 text-slate-800 transition-colors duration-300 font-sans scroll-smooth">
+    <div
+        class="min-h-screen bg-linear-to-tr from-amber-50/20 via-[#FDFDFC] to-yellow-50/30 text-slate-800 transition-colors duration-300 font-sans scroll-smooth">
 
         <!-- Sticky Header & Navbar -->
         <header class="sticky top-0 z-40 bg-white/70 backdrop-blur-lg border-b border-amber-100/50 transition-all">
@@ -382,21 +272,18 @@ const resetPriceFilters = () => {
                 <!-- Logo Frame from settings -->
                 <div class="flex items-center space-x-3">
                     <a href="#" class="flex items-center space-x-2">
-                        <img
-                            v-if="logoUrl"
-                            :src="logoUrl"
-                            :alt="appName"
-                            class="h-10 w-auto object-contain p-1 rounded-lg shadow-sm"
-                        />
-                        <span v-else class="font-serif text-2xl font-bold tracking-[0.1em] text-amber-600">
+                        <img v-if="logoUrl" :src="logoUrl" :alt="appName"
+                            class="h-10 w-auto object-contain p-1 rounded-lg shadow-sm" />
+                        <span v-else class="font-serif text-2xl font-bold tracking-widest text-amber-600">
                             {{ appName }}
                         </span>
                     </a>
                 </div>
 
                 <!-- Navigation Links (Indonesian) -->
-                <nav class="hidden lg:flex items-center space-x-8 text-xs font-semibold uppercase tracking-widest text-slate-600">
-                    <a href="#hero" class="hover:text-amber-600 transition-colors">Beranda</a>
+                <nav
+                    class="hidden lg:flex items-center space-x-8 text-xs font-semibold uppercase tracking-widest text-slate-600">
+                    <a href="#" class="hover:text-amber-600 transition-colors">Beranda</a>
                     <a href="#catalog" class="hover:text-amber-600 transition-colors">Produk</a>
                     <a href="#about" class="hover:text-amber-600 transition-colors">Tentang Kami</a>
                     <a href="#order-guide" class="hover:text-amber-600 transition-colors">Cara Pesan</a>
@@ -406,26 +293,20 @@ const resetPriceFilters = () => {
                 <!-- Action Utilities (Cart & Login) -->
                 <div class="flex items-center space-x-4">
                     <!-- Cart button -->
-                    <button
-                        @click="isCartOpen = true"
+                    <button @click="isCartOpen = true"
                         class="relative p-2 rounded-full hover:bg-amber-50 text-slate-600 transition-colors cursor-pointer"
-                        aria-label="Keranjang Belanja"
-                    >
+                        aria-label="Keranjang Belanja">
                         <ShoppingBag class="w-4.5 h-4.5 text-amber-600" />
-                        <span
-                            v-if="cartCount > 0"
-                            class="absolute -top-0.5 -right-0.5 bg-amber-600 text-white text-[9px] font-bold w-4.5 h-4.5 flex items-center justify-center rounded-full shadow-sm animate-bounce"
-                        >
+                        <span v-if="cartCount > 0"
+                            class="absolute -top-0.5 -right-0.5 bg-amber-600 text-white text-[9px] font-bold w-4.5 h-4.5 flex items-center justify-center rounded-full shadow-sm animate-bounce">
                             {{ cartCount }}
                         </span>
                     </button>
 
                     <!-- Login button -->
-                    <a
-                        href="/admin/dashboard"
+                    <a :href="admin.dashboard.url()"
                         class="p-2 rounded-full hover:bg-amber-50 text-slate-600 transition-colors cursor-pointer"
-                        aria-label="Login"
-                    >
+                        aria-label="Login">
                         <LogIn class="w-4.5 h-4.5 text-amber-600" />
                     </a>
                 </div>
@@ -437,39 +318,43 @@ const resetPriceFilters = () => {
             <!-- Split Background Grid with Fresh Cyan Gradients -->
             <div class="absolute inset-0 grid grid-cols-1 lg:grid-cols-2 pointer-events-none z-0">
                 <div class="bg-white/40/30"></div>
-                <div class="bg-gradient-to-tr from-amber-100/30 via-yellow-100/20 to-orange-50/30 border-l border-amber-100/20"></div>
+                <div
+                    class="bg-linear-to-tr from-amber-100/30 via-yellow-100/20 to-orange-50/30 border-l border-amber-100/20">
+                </div>
             </div>
 
             <!-- Main Layout Content -->
-            <div class="max-w-7xl mx-auto px-6 w-full lg:grow grid grid-cols-1 lg:grid-cols-12 gap-8 items-center py-12 z-10">
+            <div
+                class="max-w-7xl mx-auto px-6 w-full lg:grow grid grid-cols-1 lg:grid-cols-12 gap-8 items-center py-12 z-10">
 
                 <!-- Left Column: Serif Text and CTA -->
                 <div class="lg:col-span-5 flex flex-col justify-center space-y-6 lg:pr-6">
-                    <div class="inline-flex items-center space-x-2 bg-amber-500/10/10 text-[10px] text-amber-700 uppercase tracking-widest px-3 py-1 rounded-full w-fit font-bold shadow-sm">
-                        <span>Koleksi Segar 2026</span>
+                    <div
+                        class="inline-flex items-center space-x-2 bg-amber-500/10/10 text-[10px] text-amber-700 uppercase tracking-widest px-3 py-1 rounded-full w-fit font-bold shadow-sm">
+                        <span>Hadir dengan Gaya Terbaru</span>
                     </div>
 
-                    <h1 class="text-5xl md:text-6xl font-serif leading-[1.1] tracking-tight font-light select-none text-slate-800">
-                        Ekspresikan <br />
-                        Gaya <span class="font-normal italic text-amber-600 bg-amber-100/40/20 px-2 rounded-lg">Segar Anda</span>.
+                    <h1
+                        class="text-5xl md:text-6xl font-serif leading-[1.1] tracking-tight font-light select-none text-slate-800">
+                        Nyaman <br />
+                        dalam Setiap <span
+                            class="font-normal italic text-amber-600 bg-amber-100/20 px-2 rounded-lg">Penampilan</span>.
                     </h1>
 
                     <p class="text-sm text-slate-500 max-w-md leading-relaxed font-light">
-                        Temukan koleksi busana terbaru kami yang dirancang untuk kenyamanan dan gaya sehari-hari Anda.
+                        Koleksi fashion wanita dengan sentuhan elegan, material berkualitas, dan kenyamanan yang dapat
+                        Anda rasakan di setiap pemakaian.
                     </p>
 
                     <div class="flex items-center space-x-4 pt-4">
-                        <a
-                            href="#catalog"
-                            class="inline-flex items-center justify-center bg-amber-600 text-white px-8 py-3.5 text-xs font-semibold uppercase tracking-widest rounded-xl shadow-lg shadow-amber-200/50 hover:bg-amber-500 hover:-translate-y-0.5 transition-all duration-300 group cursor-pointer"
-                        >
+                        <a href="#catalog"
+                            class="inline-flex items-center justify-center bg-amber-600 text-white px-8 py-3.5 text-xs font-semibold uppercase tracking-widest rounded-xl shadow-lg shadow-amber-200/50 hover:bg-amber-500 hover:-translate-y-0.5 transition-all duration-300 group cursor-pointer">
                             Beli Sekarang
-                            <ArrowRight class="w-3.5 h-3.5 ml-2 transform group-hover:translate-x-1 transition-transform" />
+                            <ArrowRight
+                                class="w-3.5 h-3.5 ml-2 transform group-hover:translate-x-1 transition-transform" />
                         </a>
-                        <a
-                            href="#about"
-                            class="inline-flex items-center justify-center border border-amber-200 text-xs font-semibold uppercase tracking-widest px-8 py-3.5 rounded-xl hover:bg-amber-500/5 hover:border-amber-400 transition-all cursor-pointer"
-                        >
+                        <a href="#about"
+                            class="inline-flex items-center justify-center border border-amber-200 text-xs font-semibold uppercase tracking-widest px-8 py-3.5 rounded-xl hover:bg-amber-500/5 hover:border-amber-400 transition-all cursor-pointer">
                             Tentang Kami
                         </a>
                     </div>
@@ -480,64 +365,60 @@ const resetPriceFilters = () => {
 
                     <!-- Massive Overlapping Serif Heading (Behind Model) -->
                     <div class="absolute inset-0 flex justify-center items-center pointer-events-none select-none z-0">
-                        <div class="text-[14vw] lg:text-[160px] font-serif font-bold leading-none tracking-tight flex opacity-10[0.03]">
+                        <div
+                            class="text-[14vw] lg:text-[120px] font-serif font-bold leading-none tracking-tight flex opacity-10[0.03]">
                             <span class="text-slate-900">DST</span>
                             <span class="text-amber-600">Collection</span>
                         </div>
                     </div>
 
                     <!-- Glowing Radial Background and Animated Morphing Blobs -->
-                    <div class="absolute inset-0 -z-10 flex justify-center items-center pointer-events-none select-none">
-                        <div class="absolute w-[350px] h-[350px] rounded-full bg-gradient-to-tr from-amber-400/25 via-yellow-400/20 to-orange-300/25/15/20/15 blur-3xl animate-blob"></div>
-                        <div class="absolute w-[400px] h-[400px] rounded-full bg-gradient-to-br from-rose-300/20 via-amber-200/20 to-orange-300/20/15/15/15 blur-3xl animate-blob animation-delay-2000"></div>
+                    <div
+                        class="absolute inset-0 -z-10 flex justify-center items-center pointer-events-none select-none">
+                        <div
+                            class="absolute w-[350px] h-[350px] rounded-full bg-linear-to-tr from-amber-400/25 via-yellow-400/20 to-orange-300/25/15/20/15 blur-3xl animate-blob">
+                        </div>
+                        <div
+                            class="absolute w-[400px] h-[400px] rounded-full bg-linear-to-br from-rose-300/20 via-amber-200/20 to-orange-300/20/15/15/15 blur-3xl animate-blob animation-delay-2000">
+                        </div>
                     </div>
 
                     <!-- Main Model Central Image (With Floating Animation) -->
-                    <div class="relative w-[310px] h-[440px] lg:w-[390px] lg:h-[540px] rounded-[2rem] overflow-hidden z-10 transition-transform duration-500 hover:scale-[1.02] animate-float-model">
-                        <img
-                            :src="homepage.hero_image_url || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&auto=format&fit=crop&q=80'"
-                            alt="DSTCLO Model Unggulan"
-                            class="w-full h-full object-cover"
-                        />
+                    <div
+                        class="relative w-[310px] h-[440px] lg:w-[390px] lg:h-[540px] rounded-[2rem] overflow-hidden z-10 transition-transform duration-500 hover:scale-[1.02] animate-float-model">
+                        <img :src="homepage.hero_image_url || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&auto=format&fit=crop&q=80'"
+                            alt="DSTCLO Model Unggulan" class="w-full h-full object-cover" />
                     </div>
 
                     <!-- FLOATING HERO TAG 1: Product Showcase -->
-                    <div
-                        v-if="featuredProducts[0]"
-                        @click="openQuickView(featuredProducts[0])"
-                        class="absolute top-10 left-4 md:-left-6 z-20 flex items-center space-x-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-lg border border-amber-100/40 cursor-pointer transform hover:-translate-y-1 transition-all animate-float-tag-1"
-                    >
-                        <img
-                            :src="getProductImage(featuredProducts[0])"
-                            alt="Preview Produk"
-                            class="w-10 h-10 object-cover rounded-lg"
-                        />
+                    <div v-if="featuredProducts[0]" @click="openQuickView(featuredProducts[0])"
+                        class="absolute top-10 left-4 md:-left-6 z-20 flex items-center space-x-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-lg border border-amber-100/40 cursor-pointer transform hover:-translate-y-1 transition-all animate-float-tag-1">
+                        <img :src="getProductImage(featuredProducts[0])" alt="Preview Produk"
+                            class="w-10 h-10 object-cover rounded-lg" />
                         <div class="text-left">
                             <h4 class="text-[9px] font-bold text-amber-600 uppercase tracking-widest">Terpopuler</h4>
-                            <p class="text-[11px] font-semibold truncate max-w-[100px]">{{ featuredProducts[0].name }}</p>
-                            <span class="text-[11px] font-bold text-amber-600">{{ getProductPriceRange(featuredProducts[0]) }}</span>
+                            <p class="text-[11px] font-semibold truncate max-w-[100px]">{{ featuredProducts[0].name }}
+                            </p>
+                            <span class="text-[11px] font-bold text-amber-600">{{
+                                getProductPriceRange(featuredProducts[0]) }}</span>
                         </div>
-                        <div class="flex items-center justify-center w-6 h-6 rounded-full bg-amber-50/50 text-amber-600">
+                        <div
+                            class="flex items-center justify-center w-6 h-6 rounded-full bg-amber-50/50 text-amber-600">
                             <Plus class="w-3.5 h-3.5" />
                         </div>
                     </div>
 
                     <!-- FLOATING HERO TAG 2: Rating -->
-                    <div
-                        v-if="featuredProducts[1]"
-                        @click="openQuickView(featuredProducts[1])"
-                        class="absolute top-28 right-4 md:-right-6 z-20 flex items-center space-x-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-lg border border-amber-100/40 cursor-pointer transform hover:-translate-y-1 transition-all animate-float-tag-2"
-                    >
-                        <img
-                            :src="getProductImage(featuredProducts[1], 1)"
-                            alt="Preview Produk"
-                            class="w-10 h-10 object-cover rounded-lg"
-                        />
+                    <div v-if="featuredProducts[1]" @click="openQuickView(featuredProducts[1])"
+                        class="absolute top-28 right-4 md:-right-6 z-20 flex items-center space-x-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-lg border border-amber-100/40 cursor-pointer transform hover:-translate-y-1 transition-all animate-float-tag-2">
+                        <img :src="getProductImage(featuredProducts[1], 1)" alt="Preview Produk"
+                            class="w-10 h-10 object-cover rounded-lg" />
                         <div class="text-left">
                             <div class="flex items-center text-amber-400 space-x-0.5 mb-0.5">
                                 <Star class="w-2.5 h-2.5 fill-current" v-for="i in 5" :key="i" />
                             </div>
-                            <p class="text-[11px] font-semibold truncate max-w-[100px]">{{ featuredProducts[1].name }}</p>
+                            <p class="text-[11px] font-semibold truncate max-w-[100px]">{{ featuredProducts[1].name }}
+                            </p>
                             <span class="text-[10px] font-semibold text-emerald-500">Stok Tersedia</span>
                         </div>
                     </div>
@@ -547,7 +428,8 @@ const resetPriceFilters = () => {
             </div>
 
             <!-- Scroll Indicator -->
-            <div class="max-w-7xl mx-auto px-6 w-full flex items-center justify-between pb-8 z-10 text-xs font-semibold text-slate-500">
+            <div
+                class="max-w-7xl mx-auto px-6 w-full flex items-center justify-between pb-8 z-10 text-xs font-semibold text-slate-500">
                 <div class="flex items-center space-x-3">
                     <span class="text-amber-600">#DSTCollection</span>
                     <span class="w-1 h-1 rounded-full bg-amber-300"></span>
@@ -565,191 +447,53 @@ const resetPriceFilters = () => {
 
             <div class="space-y-6 mb-12">
                 <div class="text-center space-y-2">
-                    <h2 class="text-xs uppercase tracking-[0.3em] font-bold text-amber-600">Katalog Eksklusif</h2>
-                    <h3 class="text-3xl font-serif text-slate-800">Koleksi Busana Pilihan</h3>
+                    <h2 class="text-xs uppercase tracking-[0.3em] font-bold text-amber-600">Koleksi Pilihan</h2>
+                    <h3 class="text-3xl font-serif text-slate-800">Temukan Gaya Favoritmu</h3>
                     <p class="text-sm text-slate-500 max-w-lg mx-auto font-light">
-                        Temukan busana favorit Anda dari koleksi terbaru kami.
+                        Temukan pilihan terbaik yang memadukan kenyamanan, kualitas, dan desain elegan untuk menemani
+                        setiap aktivitas Anda.
                     </p>
                 </div>
 
                 <!-- Interactive Filters & Search Controls bar -->
-                <div class="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-amber-100/30 flex flex-col md:flex-row items-center gap-4 justify-between">
+                <div
+                    class="bg-white/80 backdrop-blur-md p-6 rounded-3xl shadow-sm border border-amber-100/30 flex flex-col md:flex-row items-center gap-4 justify-between">
 
                     <!-- Search Input -->
                     <div class="relative w-full md:w-80">
-                        <input
-                            v-model="searchInput"
-                            type="text"
-                            placeholder="Cari produk..."
-                            class="w-full bg-slate-50 border border-slate-200 text-xs px-4 py-3 pr-10 rounded-xl outline-none focus:border-amber-500 text-slate-700 transition-all"
-                        />
+                        <input v-model="searchInput" type="text" placeholder="Cari produk..."
+                            class="w-full bg-slate-50 border border-slate-200 text-xs px-4 py-3 pr-10 rounded-xl outline-none focus:border-amber-500 text-slate-700 transition-all" />
                         <Search class="absolute right-3 top-3.5 w-4 h-4 text-slate-400" />
                     </div>
 
-                    <!-- Category Chips -->
-                    <div class="flex flex-wrap gap-2 w-full md:w-auto justify-center">
-                        <button
-                            @click="selectedCategory = null"
-                            :class="[
-                                'px-4 py-2 text-[11px] font-semibold uppercase tracking-wider rounded-xl border transition-all cursor-pointer',
-                                !selectedCategory
-                                    ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/50'
-                                    : 'bg-transparent text-slate-600 border-slate-200 hover'
-                            ]"
-                        >
+                    <!-- Category Chips Carousel -->
+                    <DraggableCarousel class="w-full md:w-auto">
+                        <button @click="selectedCategory = null" :class="[
+                            'shrink-0 px-4 py-2 text-[11px] font-semibold uppercase tracking-wider rounded-xl border transition-all cursor-pointer whitespace-nowrap',
+                            !selectedCategory
+                                ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/50'
+                                : 'bg-transparent text-slate-600 border-slate-200 hover'
+                        ]">
                             Semua
                         </button>
-                        <button
-                            v-for="category in categories"
-                            :key="category.id"
-                            @click="toggleCategory(category.slug)"
+                        <button v-for="category in categories" :key="category.id" @click="toggleCategory(category.slug)"
                             :class="[
-                                'px-4 py-2 text-[11px] font-semibold uppercase tracking-wider rounded-xl border transition-all cursor-pointer',
+                                'shrink-0 px-4 py-2 text-[11px] font-semibold uppercase tracking-wider rounded-xl border transition-all cursor-pointer whitespace-nowrap',
                                 selectedCategory === category.slug
                                     ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/50'
                                     : 'bg-transparent text-slate-600 border-slate-200 hover'
-                            ]"
-                        >
+                            ]">
                             {{ category.name }}
                         </button>
-                    </div>
-
-                    <!-- Filter panel toggler -->
-                    <button
-                        @click="showFilters = !showFilters"
-                        class="flex items-center space-x-2 px-4 py-2.5 rounded-xl border border-slate-200 text-xs font-semibold text-slate-600 hover:border-amber-400 cursor-pointer transition-colors"
-                    >
-                        <Filter class="w-3.5 h-3.5" />
-                        <span>Filter & Urutkan</span>
-                        <span v-if="minPrice || maxPrice || sortBy !== 'default'" class="w-2 h-2 rounded-full bg-amber-600"></span>
-                    </button>
-                </div>
-
-                <!-- Expandable Filter Panel -->
-                <div
-                    v-if="showFilters"
-                    class="bg-white/50/40 p-6 rounded-2xl border border-amber-100/20 grid grid-cols-1 md:grid-cols-3 gap-6 animate-fade-in-up"
-                >
-                    <!-- Price Range -->
-                    <div class="space-y-2">
-                        <label class="text-[11px] uppercase tracking-wider font-bold text-slate-500">Rentang Harga</label>
-                        <div class="flex items-center space-x-2">
-                            <RupiahInput
-                                v-model="minPrice"
-                                placeholder="Min"
-                                class="w-full bg-white text-slate-700"
-                            />
-                            <span class="text-xs text-slate-400">s/d</span>
-                            <RupiahInput
-                                v-model="maxPrice"
-                                placeholder="Max"
-                                class="w-full bg-white text-slate-700"
-                            />
-                        </div>
-                    </div>
-
-                    <!-- Sort Options -->
-                    <div class="space-y-2">
-                        <label class="text-[11px] uppercase tracking-wider font-bold text-slate-500">Urutkan Berdasarkan</label>
-                        <Select v-model="sortBy">
-                            <SelectTrigger class="w-full bg-white border border-slate-200 px-3 py-2 text-xs rounded-lg outline-none focus:border-amber-500 text-slate-700 h-10">
-                                <SelectValue placeholder="Pilih urutan" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem :value="CatalogSortOption.DEFAULT">Default (Urutan Utama)</SelectItem>
-                                <SelectItem :value="CatalogSortOption.PRICE_ASC">Harga Terendah</SelectItem>
-                                <SelectItem :value="CatalogSortOption.PRICE_DESC">Harga Tertinggi</SelectItem>
-                                <SelectItem :value="CatalogSortOption.NAME_ASC">Nama Produk (A-Z)</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-
-                    <!-- Reset Trigger -->
-                    <div class="flex items-end">
-                        <button
-                            @click="resetPriceFilters"
-                            class="w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2.5 rounded-lg text-xs font-semibold uppercase tracking-wider transition-colors cursor-pointer"
-                        >
-                            Atur Ulang Filter
-                        </button>
-                    </div>
+                    </DraggableCarousel>
                 </div>
             </div>
 
             <!-- Product Grid -->
-            <div v-if="filteredProducts.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
-                <div
-                    v-for="(product, idx) in filteredProducts"
-                    :key="product.id"
-                    class="group relative flex flex-col space-y-4"
-                >
-                    <!-- Product Image Container -->
-                    <div class="relative aspect-[3/4] w-full overflow-hidden rounded-2xl bg-amber-50/50 shadow-md transition-shadow hover">
-                        <img
-                            :src="getProductImage(product, idx)"
-                            :alt="product.name"
-                            class="h-full w-full object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
-                        />
-                        <!-- Subtle Gradient Overlay -->
-                        <div class="absolute inset-0 bg-gradient-to-t from-amber-950/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-
-                        <!-- Absolute Status Badges -->
-                        <div class="absolute top-4 left-4 flex flex-col space-y-2">
-                            <span
-                                v-if="getTotalStock(product) === 0"
-                                class="bg-red-500 text-white text-[9px] font-bold uppercase tracking-wider px-3 py-1 rounded-md"
-                            >
-                                Habis
-                            </span>
-                            <span
-                                v-else-if="getTotalStock(product) < 15"
-                                class="bg-amber-500 text-white text-[9px] font-bold uppercase tracking-wider px-3 py-1 rounded-md animate-pulse"
-                            >
-                                Menipis
-                            </span>
-                            <span
-                                v-else
-                                class="bg-amber-600 text-white text-[9px] font-bold uppercase tracking-wider px-3 py-1 rounded-md"
-                            >
-                                Terbaru
-                            </span>
-                        </div>
-
-                        <!-- Hover Action Quick View Button -->
-                        <div class="absolute bottom-4 inset-x-4 flex justify-center opacity-0 transform translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
-                            <button
-                                @click="openQuickView(product)"
-                                class="w-full flex items-center justify-center bg-white/95 backdrop-blur-sm text-slate-800 hover:bg-amber-600 hover:text-white px-4 py-3 rounded-xl shadow-md text-xs font-bold uppercase tracking-widest transition-all duration-200 cursor-pointer"
-                            >
-                                <Eye class="w-4 h-4 mr-2" />
-                                Lihat Detail
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Product Details Info -->
-                    <div class="flex flex-col space-y-1">
-                        <!-- Category Tags -->
-                        <span class="text-[10px] font-bold uppercase tracking-widest text-amber-600">
-                            {{ product.categories.map(c => c.name).join(', ') }}
-                        </span>
-
-                        <!-- Title -->
-                        <h4 class="text-base font-semibold text-slate-700 line-clamp-1 group-hover transition-colors">
-                            {{ product.name }}
-                        </h4>
-
-                        <!-- Price -->
-                        <p class="text-sm font-bold text-amber-600">
-                            {{ getProductPriceRange(product) }}
-                        </p>
-
-                        <!-- Stock Indicator -->
-                        <span class="text-[11px] text-slate-400 font-light mt-0.5">
-                            Ukuran tersedia: {{ product.variants.map(v => v.name).join(', ') }}
-                        </span>
-                    </div>
-                </div>
+            <div v-if="filteredProducts.length > 0"
+                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
+                <ProductCard v-for="(product, idx) in filteredProducts" :key="product.id" :product="product"
+                    :index-offset="idx" @quick-view="openQuickView" />
             </div>
 
             <!-- Empty Product State -->
@@ -759,17 +503,16 @@ const resetPriceFilters = () => {
                 <p class="text-sm text-slate-400">
                     Mohon maaf, kami tidak menemukan pakaian yang cocok dengan kata kunci pencarian Anda.
                 </p>
-                <button
-                    @click="searchInput = ''; selectedCategory = null; resetPriceFilters()"
-                    class="mt-2 text-xs font-bold uppercase tracking-widest text-amber-600 underline underline-offset-4 cursor-pointer"
-                >
+                <button @click="searchInput = ''; selectedCategory = null"
+                    class="mt-2 text-xs font-bold uppercase tracking-widest text-amber-600 underline underline-offset-4 cursor-pointer">
                     Reset Pencarian
                 </button>
             </div>
         </section>
 
         <!-- Gallery / Lookbook Section -->
-        <section id="gallery" class="w-full bg-gradient-to-br from-amber-50/40 via-yellow-50/20 to-orange-50/30 py-24 border-t border-b border-amber-100/30">
+        <section id="gallery"
+            class="w-full bg-linear-to-br from-amber-50/40 via-yellow-50/20 to-orange-50/30 py-24 border-t border-b border-amber-100/30">
             <div class="max-w-7xl mx-auto px-6 space-y-12">
                 <!-- Header -->
                 <div class="text-center space-y-3 max-w-lg mx-auto">
@@ -782,17 +525,13 @@ const resetPriceFilters = () => {
 
                 <!-- Gallery Grid -->
                 <div v-if="homepage.gallery_images.length > 0" class="grid grid-cols-2 md:grid-cols-3 gap-4">
-                    <div
-                        v-for="(image, index) in homepage.gallery_images"
-                        :key="image.id"
-                        class="group relative aspect-[3/4] rounded-2xl overflow-hidden shadow-md border-2 border-white cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
-                    >
-                        <img
-                            :src="image.url"
-                            :alt="`Lookbook ${Number(index) + 1}`"
-                            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
-                        />
-                        <div class="absolute inset-0 bg-gradient-to-t from-amber-950/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    <div v-for="(image, index) in homepage.gallery_images" :key="image.id"
+                        class="group relative aspect-3/4 rounded-2xl overflow-hidden shadow-md border-2 border-white cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
+                        <img :src="image.url" :alt="`Lookbook ${Number(index) + 1}`"
+                            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
+                        <div
+                            class="absolute inset-0 bg-linear-to-t from-amber-950/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                        </div>
                     </div>
                 </div>
                 <div v-else class="text-center py-12">
@@ -812,13 +551,13 @@ const resetPriceFilters = () => {
             </div>
 
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div
-                    v-for="(step, index) in orderSteps"
-                    :key="index"
-                    class="bg-white/50 p-6 rounded-2xl border border-amber-100/30 shadow-sm relative overflow-hidden text-center group hover:-translate-y-1 transition-transform"
-                >
-                    <div class="absolute -top-4 -right-4 w-16 h-16 bg-amber-100/50/50 rounded-full flex items-center justify-center text-amber-600 font-bold text-xl font-serif">{{ index + 1 }}</div>
-                    <div class="w-12 h-12 rounded-xl bg-amber-100/30 text-amber-600 flex items-center justify-center mx-auto mb-4">
+                <div v-for="(step, index) in orderSteps" :key="index"
+                    class="bg-white/50 p-6 rounded-2xl border border-amber-100/30 shadow-sm relative overflow-hidden text-center group hover:-translate-y-1 transition-transform">
+                    <div
+                        class="absolute -top-4 -right-4 w-16 h-16 bg-amber-100/50/50 rounded-full flex items-center justify-center text-amber-600 font-bold text-xl font-serif">
+                        {{ index + 1 }}</div>
+                    <div
+                        class="w-12 h-12 rounded-xl bg-amber-100/30 text-amber-600 flex items-center justify-center mx-auto mb-4">
                         <ShoppingBag v-if="index === 0" class="w-5 h-5" />
                         <Star v-else-if="index === 1" class="w-5 h-5" />
                         <Plus v-else-if="index === 2" class="w-5 h-5" />
@@ -836,21 +575,22 @@ const resetPriceFilters = () => {
         <section id="about" class="max-w-7xl mx-auto px-6 py-20 border-b border-amber-100/30">
             <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                 <!-- Column Left -->
-                <div class="lg:col-span-6 relative aspect-square max-w-md mx-auto lg:max-w-none rounded-3xl overflow-hidden shadow-lg border-2 border-white">
-                    <img
-                        :src="homepage.about_image_url || 'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80'"
-                        alt="Tentang Kami"
-                        class="w-full h-full object-cover"
-                    />
+                <div
+                    class="lg:col-span-6 relative aspect-square max-w-md mx-auto lg:max-w-none rounded-3xl overflow-hidden shadow-lg border-2 border-white">
+                    <img :src="homepage.about_image_url || 'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80'"
+                        alt="Tentang Kami" class="w-full h-full object-cover" />
                 </div>
                 <!-- Column Right -->
                 <div class="lg:col-span-6 space-y-6">
                     <span class="text-xs uppercase tracking-[0.3em] font-bold text-amber-600">Tentang Kami</span>
                     <h3 class="text-3xl font-serif">Kami Menghadirkan Busana Berkualitas</h3>
                     <p class="text-sm text-slate-500 leading-relaxed font-light whitespace-pre-line">
-                        {{ aboutApp || 'Kami adalah rumah produksi busana dan batik lokal berkualitas tinggi. Berfokus pada keindahan motif, ketepatan detail jahitan, dan pemilihan kain adem yang mengedepankan aspek fungsionalitas dan estetika.' }}
+                        {{ aboutApp || `Kami adalah rumah produksi busana dan batik lokal berkualitas tinggi. Berfokus
+                        pada keindahan motif, ketepatan detail jahitan, dan pemilihan kain adem yang mengedepankan aspek
+                        fungsionalitas dan estetika.` }}
                     </p>
-                    <div v-for="(feature, index) in aboutFeatures" :key="index" class="flex items-center space-x-3 text-xs text-slate-500 font-semibold">
+                    <div v-for="(feature, index) in aboutFeatures" :key="index"
+                        class="flex items-center space-x-3 text-xs text-slate-500 font-semibold">
                         <Check class="w-4 h-4 text-emerald-500" />
                         <span>{{ feature }}</span>
                     </div>
@@ -860,7 +600,8 @@ const resetPriceFilters = () => {
 
         <!-- Contact Section -->
         <section id="contact" class="max-w-7xl mx-auto px-6 py-20">
-            <div class="bg-white/60 backdrop-blur-md border border-amber-100/30 p-8 rounded-3xl grid grid-cols-1 lg:grid-cols-2 gap-12 items-center shadow-sm">
+            <div
+                class="bg-white/60 backdrop-blur-md border border-amber-100/30 p-8 rounded-3xl grid grid-cols-1 lg:grid-cols-2 gap-12 items-center shadow-sm">
                 <!-- Left -->
                 <div class="space-y-6">
                     <span class="text-xs uppercase tracking-[0.3em] font-bold text-amber-600">Hubungi Kami</span>
@@ -871,19 +612,22 @@ const resetPriceFilters = () => {
 
                     <div class="space-y-4">
                         <div v-if="contactPhone" class="flex items-center space-x-3 text-sm">
-                            <div class="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
+                            <div
+                                class="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
                                 <Phone class="w-4 h-4" />
                             </div>
                             <span>{{ contactPhone }}</span>
                         </div>
                         <div v-if="contactEmail" class="flex items-center space-x-3 text-sm">
-                            <div class="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
+                            <div
+                                class="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
                                 <Mail class="w-4 h-4" />
                             </div>
                             <span>{{ contactEmail }}</span>
                         </div>
                         <div v-if="contactAddress" class="flex items-center space-x-3 text-sm">
-                            <div class="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
+                            <div
+                                class="w-8 h-8 rounded-lg bg-amber-100/40 text-amber-600 flex items-center justify-center">
                                 <MapPin class="w-4 h-4" />
                             </div>
                             <span>{{ contactAddress }}</span>
@@ -895,15 +639,15 @@ const resetPriceFilters = () => {
                 <div class="bg-slate-50 p-6 rounded-2xl border border-slate-200 space-y-4">
                     <h4 class="font-bold text-base">Kirim Pesan Cepat</h4>
                     <div class="space-y-3">
-                        <input type="text" placeholder="Nama Anda" class="w-full text-xs px-4 py-3 bg-white border border-slate-200 rounded-lg outline-none focus:border-amber-500 text-slate-700" />
-                        <textarea placeholder="Tulis pesan Anda di sini..." rows="4" class="w-full text-xs px-4 py-3 bg-white border border-slate-200 rounded-lg outline-none focus:border-amber-500 text-slate-700 scrollbar-thin"></textarea>
+                        <input type="text" placeholder="Nama Anda"
+                            class="w-full text-xs px-4 py-3 bg-white border border-slate-200 rounded-lg outline-none focus:border-amber-500 text-slate-700" />
+                        <textarea placeholder="Tulis pesan Anda di sini..." rows="4"
+                            class="w-full text-xs px-4 py-3 bg-white border border-slate-200 rounded-lg outline-none focus:border-amber-500 text-slate-700 scrollbar-thin"></textarea>
 
                         <!-- WhatsApp Direct Send Button -->
-                        <a
-                            :href="`https://wa.me/${contactPhone.replace(/[^0-9]/g, '') || '6281234567890'}`"
+                        <a :href="`https://wa.me/${contactPhone.replace(/[^0-9]/g, '') || '6281234567890'}`"
                             target="_blank"
-                            class="w-full inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-500 text-white py-3 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors"
-                        >
+                            class="w-full inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-500 text-white py-3 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors">
                             <Phone class="w-4 h-4 mr-2" />
                             Kirim Melalui WhatsApp
                         </a>
@@ -918,18 +662,15 @@ const resetPriceFilters = () => {
                 <!-- Brand Profile -->
                 <div class="space-y-4">
                     <div class="flex items-center space-x-2">
-                        <img
-                            v-if="logoUrl"
-                            :src="logoUrl"
-                            :alt="appName"
-                            class="h-8 w-auto object-contain p-0.5 rounded shadow-sm"
-                        />
-                        <span v-else class="font-serif text-xl font-bold tracking-widest text-black text-amber-600">
+                        <img v-if="logoUrl" :src="logoUrl" :alt="appName"
+                            class="h-8 w-auto object-contain p-0.5 rounded shadow-sm" />
+                        <span v-else class="font-serif text-xl font-bold tracking-widest text-amber-600">
                             {{ appName }}
                         </span>
                     </div>
                     <p class="text-xs text-slate-400 leading-relaxed font-light">
-                        Rumah produksi busana dan batik lokal berkualitas tinggi. Menghadirkan desain eksklusif untuk gaya sehari-hari Anda.
+                        Rumah produksi busana dan batik lokal berkualitas tinggi. Menghadirkan desain eksklusif untuk
+                        gaya sehari-hari Anda.
                     </p>
                 </div>
 
@@ -951,164 +692,41 @@ const resetPriceFilters = () => {
                         <li><a href="#about" class="hover transition-colors">Tentang Kami</a></li>
                         <li><a href="#order-guide" class="hover transition-colors">Cara Pemesanan</a></li>
                         <li><a href="#contact" class="hover transition-colors">Hubungi Kami</a></li>
-                        <li><a href="/admin/dashboard" class="hover transition-colors font-semibold">Login Dashboard Admin</a></li>
+                        <li><a href="/admin/dashboard" class="hover transition-colors font-semibold">Login Dashboard
+                                Admin</a></li>
                     </ul>
                 </div>
 
                 <!-- Socials -->
                 <div class="space-y-3">
                     <h4 class="text-xs uppercase font-bold text-slate-800 tracking-widest">Sosial Media</h4>
-                    <p class="text-xs text-slate-400 font-light">Ikuti sosial media kami untuk mendapatkan update produk terbaru.</p>
+                    <p class="text-xs text-slate-400 font-light">Ikuti sosial media kami untuk mendapatkan update produk
+                        terbaru.</p>
                     <div class="flex space-x-3 text-xs">
-                        <a v-if="instagramUrl" :href="instagramUrl" target="_blank" class="text-slate-400 hover">Instagram</a>
-                        <a v-if="facebookUrl" :href="facebookUrl" target="_blank" class="text-slate-400 hover">Facebook</a>
+                        <a v-if="instagramUrl" :href="instagramUrl" target="_blank"
+                            class="text-slate-400 hover">Instagram</a>
+                        <a v-if="facebookUrl" :href="facebookUrl" target="_blank"
+                            class="text-slate-400 hover">Facebook</a>
                         <a v-if="tiktokUrl" :href="tiktokUrl" target="_blank" class="text-slate-400 hover">TikTok</a>
                     </div>
                 </div>
             </div>
 
-            <div class="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-amber-100/30 flex flex-col sm:flex-row justify-between items-center text-[10px] text-slate-400 font-light space-y-4 sm:space-y-0">
+            <div
+                class="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-amber-100/30 flex flex-col sm:flex-row justify-between items-center text-[10px] text-slate-400 font-light space-y-4 sm:space-y-0">
                 <p>&copy; {{ new Date().getFullYear() }} {{ appName }}. Hak Cipta Dilindungi.</p>
             </div>
         </footer>
 
-        <!-- CENTERED DETAIL MODAL (MODA DETAIL) -->
-        <div
-            v-if="activeProduct"
-            class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-opacity duration-300"
-            @click.self="closeQuickView"
-        >
-            <div
-                class="w-full max-w-3xl bg-[#FDFDFC] rounded-3xl p-6 md:p-8 shadow-2xl flex flex-col md:flex-row gap-8 max-h-[90vh] overflow-y-auto border border-amber-100/30 scrollbar-thin"
-            >
-                <!-- Image Side -->
-                <div class="w-full md:w-1/2 flex flex-col space-y-3">
-                    <div class="aspect-[3/4] rounded-2xl overflow-hidden bg-slate-50 border border-slate-200/50/50 shadow-sm relative">
-                        <img
-                            :src="getProductImage(activeProduct)"
-                            :alt="activeProduct.name"
-                            class="w-full h-full object-cover"
-                        />
-                    </div>
-                </div>
-
-                <!-- Info Side -->
-                <div class="w-full md:w-1/2 flex flex-col justify-between space-y-6 text-left">
-                    <div class="space-y-4">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <span class="text-[10px] font-bold uppercase tracking-widest text-amber-600">
-                                    {{ activeProduct.categories.map(c => c.name).join(', ') }}
-                                </span>
-                                <h3 class="text-2xl font-serif mt-0.5 text-slate-800">{{ activeProduct.name }}</h3>
-                            </div>
-                            <button
-                                @click="closeQuickView"
-                                class="p-1.5 rounded-full hover:bg-slate-100 transition-colors cursor-pointer"
-                            >
-                                <X class="w-5 h-5 text-slate-500" />
-                            </button>
-                        </div>
-
-                        <!-- Description (Scrollbar thin applied) -->
-                        <div class="space-y-1.5">
-                            <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Deskripsi</h4>
-                            <p class="text-xs text-slate-500 font-light leading-relaxed max-h-32 overflow-y-auto scrollbar-thin pr-1">
-                                {{ activeProduct.description || 'Pakaian batik modern dan nyaman hasil karya perajin terbaik kami. Menggunakan serat kain pilihan yang awet dan menyejukkan kulit.' }}
-                            </p>
-                        </div>
-
-                        <!-- Variant Select -->
-                        <div v-if="activeProduct.variants.length > 0" class="space-y-2">
-                            <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Pilih Ukuran / Varian</h4>
-                            <div class="flex flex-wrap gap-1.5">
-                                <button
-                                    v-for="variant in activeProduct.variants"
-                                    :key="variant.id"
-                                    @click="activeVariant = variant"
-                                    :class="[
-                                        'px-3 py-1.5 rounded-xl text-xs font-semibold uppercase tracking-wider border cursor-pointer transition-all',
-                                        activeVariant?.id === variant.id
-                                            ? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/30'
-                                            : 'bg-transparent text-slate-600 border-slate-200/60'
-                                    ]"
-                                >
-                                    {{ variant.name }}
-                                    <span class="text-[9px] opacity-70 ml-1">({{ variant.stock }} pcs)</span>
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Price Tiers -->
-                        <div v-if="activeVariant && activeVariant.prices.length > 0" class="space-y-2">
-                            <h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Saluran Harga (Grosir/Eceran)</h4>
-                            <div class="grid grid-cols-2 gap-1.5 max-h-36 overflow-y-auto scrollbar-thin pr-1">
-                                <button
-                                    v-for="price in activeVariant.prices"
-                                    :key="price.id"
-                                    @click="activePriceType = price.type"
-                                    :class="[
-                                        'px-3 py-2 text-left rounded-xl border transition-all cursor-pointer',
-                                        activePriceType === price.type
-                                            ? 'border-amber-500 bg-amber-500/5/5'
-                                            : 'border-slate-200/60 hover'
-                                    ]"
-                                >
-                                    <span class="block text-[8px] uppercase tracking-wider font-bold text-slate-400">
-                                        {{ price.type_label }}
-                                    </span>
-                                    <span class="block text-xs font-bold mt-0.5 text-amber-600">
-                                        {{ formatPrice(price.price) }}
-                                    </span>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Cart Call to Action -->
-                    <div class="pt-4 border-t border-slate-100/50 space-y-4">
-                        <div class="flex justify-between items-center text-xs">
-                            <div>
-                                <span class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Harga Terpilih</span>
-                                <div class="text-xl font-bold text-amber-600 mt-0.5">
-                                    {{ selectedPrice ? formatPrice(selectedPrice.price) : 'Pilih ukuran' }}
-                                </div>
-                            </div>
-                            <div class="text-right">
-                                <span class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Sisa Stok</span>
-                                <div class="font-semibold text-slate-700 mt-0.5">
-                                    {{ activeVariant ? `${activeVariant.stock} pcs` : 'Pilih ukuran' }}
-                                </div>
-                            </div>
-                        </div>
-
-                        <button
-                            v-if="activeVariant && selectedPrice"
-                            @click="addToCart(activeProduct, activeVariant, selectedPrice)"
-                            :disabled="activeVariant.stock <= 0"
-                            :class="[
-                                'w-full py-3.5 text-xs font-bold uppercase tracking-widest rounded-xl transition-all cursor-pointer shadow-md',
-                                activeVariant.stock > 0
-                                    ? 'bg-amber-600 text-white hover:bg-amber-500 shadow-amber-200/50'
-                                    : 'bg-slate-100 text-slate-400 cursor-not-allowed shadow-none'
-                            ]"
-                        >
-                            {{ activeVariant.stock > 0 ? 'Masukkan ke Keranjang' : 'Stok Habis' }}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <!-- CENTERED DETAIL MODAL -->
+        <ProductModal :product="activeProduct" @close="closeQuickView" @add-to-cart="addToCart" />
 
         <!-- FLOATING CART SLIDE-OVER SHEET -->
-        <div
-            v-if="isCartOpen"
+        <div v-if="isCartOpen"
             class="fixed inset-0 z-50 flex items-center justify-end bg-black/60 backdrop-blur-sm transition-opacity duration-300"
-            @click.self="isCartOpen = false"
-        >
+            @click.self="isCartOpen = false">
             <div
-                class="w-full max-w-md h-full bg-[#FDFDFC] p-6 shadow-2xl flex flex-col justify-between overflow-y-auto transform translate-x-0 transition-transform duration-300 border-l border-amber-100/30"
-            >
+                class="w-full max-w-md h-full bg-[#FDFDFC] p-6 shadow-2xl flex flex-col justify-between overflow-y-auto transform translate-x-0 transition-transform duration-300 border-l border-amber-100/30">
                 <div class="space-y-6">
                     <!-- Header -->
                     <div class="flex justify-between items-center">
@@ -1116,26 +734,19 @@ const resetPriceFilters = () => {
                             <ShoppingBag class="w-5 h-5 text-amber-600" />
                             <h3 class="text-lg font-serif text-slate-800">Keranjang Belanja ({{ cartCount }})</h3>
                         </div>
-                        <button
-                            @click="isCartOpen = false"
-                            class="p-2 rounded-full hover:bg-slate-100 transition-colors cursor-pointer"
-                        >
+                        <button @click="isCartOpen = false"
+                            class="p-2 rounded-full hover:bg-slate-100 transition-colors cursor-pointer">
                             <X class="w-5 h-5 text-slate-500" />
                         </button>
                     </div>
 
                     <!-- Cart List -->
-                    <div v-if="cart.length > 0" class="space-y-4 divide-y divide-slate-100/45 max-h-[calc(100vh-280px)] overflow-y-auto pr-1 scrollbar-thin">
-                        <div
-                            v-for="item in cart"
-                            :key="`${item.variant.id}-${item.price.type}`"
-                            class="flex space-x-4 pt-4 first:pt-0"
-                        >
-                            <img
-                                :src="getProductImage(item.product)"
-                                :alt="item.product.name"
-                                class="w-16 h-20 object-cover rounded-xl bg-slate-50 border border-slate-200/50/50"
-                            />
+                    <div v-if="cart.length > 0"
+                        class="space-y-4 divide-y divide-slate-100/45 max-h-[calc(100vh-280px)] overflow-y-auto pr-1 scrollbar-thin">
+                        <div v-for="item in cart" :key="`${item.variant.id}-${item.price.type}`"
+                            class="flex space-x-4 pt-4 first:pt-0">
+                            <img :src="getProductImage(item.product)" :alt="item.product.name"
+                                class="w-16 h-20 object-cover rounded-xl bg-slate-50 border border-slate-200/50/50" />
 
                             <div class="flex-1 flex flex-col justify-between">
                                 <div class="space-y-1">
@@ -1143,37 +754,35 @@ const resetPriceFilters = () => {
                                         <h4 class="text-xs font-semibold text-slate-700 line-clamp-1">
                                             {{ item.product.name }}
                                         </h4>
-                                        <button
-                                            @click="removeFromCart(item.variant.id, item.price.type)"
-                                            class="text-slate-400 hover:text-red-500 p-1 cursor-pointer transition-colors"
-                                        >
+                                        <button @click="removeFromCart(item.variant.id, item.price.type)"
+                                            class="text-slate-400 hover:text-red-500 p-1 cursor-pointer transition-colors">
                                             <X class="w-3.5 h-3.5" />
                                         </button>
                                     </div>
                                     <p class="text-[10px] text-slate-400">
-                                        Ukuran: <strong class="text-slate-700 font-semibold">{{ item.variant.name }}</strong> • Tipe: <strong class="text-slate-700 font-semibold">{{ item.price.type_label }}</strong>
+                                        Ukuran: <strong class="text-slate-700 font-semibold">{{ item.variant.name
+                                            }}</strong> • Tipe: <strong class="text-slate-700 font-semibold">{{
+                                                item.price.type_label }}</strong>
                                     </p>
                                 </div>
 
                                 <div class="flex justify-between items-center mt-2">
                                     <!-- Quantity Stepper -->
-                                    <div class="flex items-center space-x-2 border border-slate-200 rounded-lg px-2 py-0.5">
-                                        <button
-                                            @click="updateCartQuantity(item.variant.id, item.price.type, -1)"
-                                            class="p-1 text-slate-500 hover:text-black:text-white cursor-pointer"
-                                        >
+                                    <div
+                                        class="flex items-center space-x-2 border border-slate-200 rounded-lg px-2 py-0.5">
+                                        <button @click="updateCartQuantity(item.variant.id, item.price.type, -1)"
+                                            class="p-1 text-slate-500 hover:text-black:text-white cursor-pointer">
                                             <Minus class="w-3 h-3" />
                                         </button>
-                                        <span class="text-xs font-semibold px-1 text-slate-800">{{ item.quantity }}</span>
-                                        <button
-                                            @click="updateCartQuantity(item.variant.id, item.price.type, 1)"
-                                            class="p-1 text-slate-500 hover:text-black:text-white cursor-pointer"
-                                        >
+                                        <span class="text-xs font-semibold px-1 text-slate-800">{{ item.quantity
+                                            }}</span>
+                                        <button @click="updateCartQuantity(item.variant.id, item.price.type, 1)"
+                                            class="p-1 text-slate-500 hover:text-black:text-white cursor-pointer">
                                             <Plus class="w-3 h-3" />
                                         </button>
                                     </div>
                                     <span class="text-xs font-bold text-amber-600">
-                                        {{ formatPrice(item.price.price * item.quantity) }}
+                                        {{ `Rp ${formatRupiah(item.price.price * item.quantity)}` }}
                                     </span>
                                 </div>
                             </div>
@@ -1187,10 +796,8 @@ const resetPriceFilters = () => {
                         <p class="text-xs text-slate-400 max-w-xs mx-auto font-light leading-relaxed">
                             Jelajahi produk batik dan pakaian pilihan kami untuk menambahkan item ke dalam keranjang.
                         </p>
-                        <button
-                            @click="isCartOpen = false"
-                            class="bg-amber-600 text-white px-6 py-2.5 text-xs font-semibold uppercase tracking-widest rounded-xl hover:opacity-90 transition-all cursor-pointer shadow-md shadow-amber-200/50"
-                        >
+                        <button @click="isCartOpen = false"
+                            class="bg-amber-600 text-white px-6 py-2.5 text-xs font-semibold uppercase tracking-widest rounded-xl hover:opacity-90 transition-all cursor-pointer shadow-md shadow-amber-200/50">
                             Lanjutkan Belanja
                         </button>
                     </div>
@@ -1201,24 +808,23 @@ const resetPriceFilters = () => {
                     <div class="space-y-1.5">
                         <div class="flex justify-between text-xs text-slate-500">
                             <span>Subtotal</span>
-                            <span>{{ formatPrice(cartTotal) }}</span>
+                            <span>{{ `Rp ${formatRupiah(cartTotal)}` }}</span>
                         </div>
                         <div class="flex justify-between text-xs text-slate-500">
                             <span>Biaya Kirim</span>
                             <span class="text-emerald-500 font-medium">GRATIS</span>
                         </div>
-                        <div class="flex justify-between text-sm font-bold text-slate-800 pt-1.5 border-t border-slate-100/30">
+                        <div
+                            class="flex justify-between text-sm font-bold text-slate-800 pt-1.5 border-t border-slate-100/30">
                             <span>Estimasi Total</span>
-                            <span class="text-amber-600">{{ formatPrice(cartTotal) }}</span>
+                            <span class="text-amber-600">{{ `Rp ${formatRupiah(cartTotal)}` }}</span>
                         </div>
                     </div>
 
-                    <button
-                        @click="handleWhatsAppCheckout"
-                        :disabled="isCheckingOut"
-                        class="w-full flex items-center justify-center bg-emerald-600 text-white hover:bg-emerald-500 py-3.5 text-xs font-bold uppercase tracking-widest rounded-xl transition-all cursor-pointer shadow-md shadow-emerald-100/50"
-                    >
-                        <span v-if="isCheckingOut" class="inline-block border-2 border-current border-t-transparent animate-spin rounded-full w-4 h-4 mr-2"></span>
+                    <button @click="handleWhatsAppCheckout" :disabled="isCheckingOut"
+                        class="w-full flex items-center justify-center bg-emerald-600 text-white hover:bg-emerald-500 py-3.5 text-xs font-bold uppercase tracking-widest rounded-xl transition-all cursor-pointer shadow-md shadow-emerald-100/50">
+                        <span v-if="isCheckingOut"
+                            class="inline-block border-2 border-current border-t-transparent animate-spin rounded-full w-4 h-4 mr-2"></span>
                         <Phone class="w-4 h-4 mr-2" />
                         {{ isCheckingOut ? 'Mengalihkan...' : 'Pesan Via WhatsApp' }}
                     </button>
@@ -1240,6 +846,7 @@ html {
     0% {
         transform: translateX(0%);
     }
+
     100% {
         transform: translate3d(-50%, 0, 0);
     }
@@ -1252,9 +859,12 @@ html {
 
 /* Float Animation */
 @keyframes float-hero {
-    0%, 100% {
+
+    0%,
+    100% {
         transform: translateY(0px);
     }
+
     50% {
         transform: translateY(-12px);
     }
@@ -1274,12 +884,16 @@ html {
 
 /* Blob morphing background animation */
 @keyframes blob-bounce {
-    0%, 100% {
+
+    0%,
+    100% {
         transform: translate(0px, 0px) scale(1);
     }
+
     33% {
         transform: translate(30px, -40px) scale(1.12);
     }
+
     66% {
         transform: translate(-20px, 20px) scale(0.95);
     }
@@ -1299,6 +913,7 @@ html {
         opacity: 0;
         transform: translate3d(0, 20px, 0);
     }
+
     to {
         opacity: 1;
         transform: translate3d(0, 0, 0);