@php
    /*
    |--------------------------------------------------------------------------
    | Theme
    |--------------------------------------------------------------------------
    */

    $theme = array_merge(
        [
            'primary' => '#4f9000',
            'primary_dark' => '#3c7000',
            'secondary' => '#68b900',
            'accent' => '#ffbd00',
            'accent_dark' => '#eaa900',
            'light_green' => '#efffd3',
            'cream' => '#fff8e4',
            'surface' => '#ffffff',
            'text' => '#121212',
            'muted' => '#6b7280',
            'border' => '#d7dce1',
        ],
        (array) ($landingPage->theme ?? [])
    );

    /*
    |--------------------------------------------------------------------------
    | SEO
    |--------------------------------------------------------------------------
    */

    $seo = (array) ($landingPage->seo ?? []);

    $metaTitle =
        data_get($seo, 'meta_title')
        ?: $landingPage->title
        ?: $product->name;

    $metaDescription =
        data_get($seo, 'meta_description')
        ?: \Illuminate\Support\Str::limit(
            strip_tags(
                (string) (
                    $product->short_description
                    ?: $product->name
                )
            ),
            160
        );

    /*
    |--------------------------------------------------------------------------
    | Media resolver
    |--------------------------------------------------------------------------
    */

    $mediaUrl = function (mixed $reference): ?string {
        if (is_array($reference)) {
            $reference =
                data_get($reference, 'path')
                ?: data_get($reference, 'url')
                ?: data_get($reference, 'image')
                ?: data_get($reference, 'image_path');
        }

        $reference = trim((string) $reference);

        if ($reference === '') {
            return null;
        }

        if (
            method_exists(
                \App\Models\LandingPage::class,
                'resolveMediaUrl'
            )
        ) {
            return \App\Models\LandingPage::resolveMediaUrl(
                $reference
            );
        }

        if (
            preg_match(
                '#^https?://#i',
                $reference
            )
        ) {
            $path = parse_url(
                $reference,
                PHP_URL_PATH
            );

            if (
                is_string($path)
                &&
                str_starts_with(
                    $path,
                    '/storage/'
                )
            ) {
                return $path;
            }

            return $reference;
        }

        if (
            str_starts_with(
                $reference,
                '/storage/'
            )
        ) {
            return $reference;
        }

        if (
            str_starts_with(
                $reference,
                'storage/'
            )
        ) {
            return '/' . $reference;
        }

        return '/storage/' . ltrim(
            $reference,
            '/'
        );
    };

    /*
    |--------------------------------------------------------------------------
    | Product media
    |--------------------------------------------------------------------------
    */

    $productMediaUrl = function (mixed $reference) use ($mediaUrl): ?string {
        if (blank($reference)) {
            return null;
        }

        if (
            method_exists(
                \App\Models\Product::class,
                'resolveMediaUrl'
            )
        ) {
            $resolved =
                \App\Models\Product::resolveMediaUrl(
                    $reference
                );

            if (
                is_string($resolved)
                &&
                preg_match(
                    '#^https?://#i',
                    $resolved
                )
            ) {
                $path = parse_url(
                    $resolved,
                    PHP_URL_PATH
                );

                if (
                    is_string($path)
                    &&
                    str_starts_with(
                        $path,
                        '/storage/'
                    )
                ) {
                    return $path;
                }
            }

            return $resolved;
        }

        return $mediaUrl($reference);
    };

    /*
    |--------------------------------------------------------------------------
    | Sections
    |--------------------------------------------------------------------------
    */

    $allSections = collect(
        $sections ?? []
    );

    $orderedSections = $allSections
        ->filter(
            fn ($section) =>
                (bool) $section->is_enabled
        )
        ->sortBy('sort_order')
        ->values();

    $heroSection =
        $allSections->firstWhere(
            'type',
            'hero'
        );

    $benefitsSection =
        $allSections->firstWhere(
            'type',
            'benefits'
        );

    $promoSection =
        $allSections->firstWhere(
            'type',
            'promo'
        );

    $usageSection =
        $allSections->firstWhere(
            'type',
            'usage'
        );

    $reviewsSection =
        $allSections->firstWhere(
            'type',
            'reviews'
        );

    $orderSection =
        $allSections->firstWhere(
            'type',
            'order'
        );

    $footerSection =
        $allSections->firstWhere(
            'type',
            'footer'
        );

    $hero =
        (array) (
            $heroSection?->content
            ?? []
        );

    $benefitsContent =
        (array) (
            $benefitsSection?->content
            ?? []
        );

    $promo =
        (array) (
            $promoSection?->content
            ?? []
        );

    $usage =
        (array) (
            $usageSection?->content
            ?? []
        );

    $reviews =
        (array) (
            $reviewsSection?->content
            ?? []
        );

    $orderContent =
        (array) (
            $orderSection?->content
            ?? []
        );

    $footer =
        (array) (
            $footerSection?->content
            ?? []
        );

    /*
    |--------------------------------------------------------------------------
    | Product images
    |--------------------------------------------------------------------------
    */

    $productImages = collect(
        $product->images ?? []
    )
        ->map(
            function ($image) use ($productMediaUrl) {
                if (
                    filled(
                        $image->image_path
                        ?? null
                    )
                ) {
                    return $productMediaUrl(
                        $image->image_path
                    );
                }

                return $image->url
                    ?? null;
            }
        )
        ->filter()
        ->unique()
        ->values();

    $productMainImage = null;

    if (
        filled(
            $product->cover_image
            ?? null
        )
    ) {
        $productMainImage =
            $productMediaUrl(
                $product->cover_image
            );
    }

    if (blank($productMainImage)) {
        $productMainImage =
            $productImages->first();
    }

    /*
    |--------------------------------------------------------------------------
    | Hero images
    |--------------------------------------------------------------------------
    */

    $heroImages = collect(
        data_get(
            $hero,
            'gallery_images',
            []
        )
    )
        ->map(
            function ($reference) use (
                $mediaUrl,
                $product
            ) {
                $url =
                    $mediaUrl(
                        $reference
                    );

                if (!$url) {
                    return null;
                }

                return [
                    'url' => $url,
                    'alt' => $product->name,
                ];
            }
        )
        ->filter()
        ->unique('url')
        ->values();

    if ($heroImages->isEmpty()) {
        collect([
            data_get(
                $hero,
                'main_image_url'
            ),
            data_get(
                $hero,
                'side_image_1_url'
            ),
            data_get(
                $hero,
                'side_image_2_url'
            ),
        ])
            ->filter()
            ->each(
                function ($reference) use (
                    &$heroImages,
                    $mediaUrl,
                    $product
                ) {
                    $url =
                        $mediaUrl(
                            $reference
                        );

                    if ($url) {
                        $heroImages->push([
                            'url' => $url,
                            'alt' => $product->name,
                        ]);
                    }
                }
            );
    }

    if ($heroImages->isEmpty()) {
        foreach (
            $productImages
            as $url
        ) {
            $heroImages->push([
                'url' => $url,
                'alt' => $product->name,
            ]);
        }
    }

    if (
        $heroImages->isEmpty()
        &&
        $productMainImage
    ) {
        $heroImages->push([
            'url' => $productMainImage,
            'alt' => $product->name,
        ]);
    }

    /*
    |--------------------------------------------------------------------------
    | Customer avatars
    |--------------------------------------------------------------------------
    */

    $customerAvatars = collect(
        data_get(
            $hero,
            'customer_avatars',
            []
        )
    )
        ->map(
            fn ($reference) =>
                $mediaUrl($reference)
        )
        ->filter()
        ->unique()
        ->values();

    /*
    |--------------------------------------------------------------------------
    | Benefits
    |--------------------------------------------------------------------------
    */

    $benefits = collect(
        data_get(
            $benefitsContent,
            'items',
            []
        )
    )
        ->filter()
        ->values();

    while (
        $benefits->count()
        < 6
    ) {
        $benefits->push(
            'পণ্যের সুবিধা এখানে লিখুন'
        );
    }

    /*
    |--------------------------------------------------------------------------
    | Promo
    |--------------------------------------------------------------------------
    */

    $promoImage =
        $mediaUrl(
            data_get(
                $promo,
                'image'
            )
            ?: data_get(
                $promo,
                'image_url'
            )
        );

    if (!$promoImage) {
        $promoImage =
            $productImages->get(
                1,
                $productMainImage
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Usage
    |--------------------------------------------------------------------------
    */

    $usageFeatures = collect(
        data_get(
            $usage,
            'features',
            []
        )
    )
        ->filter()
        ->values();

    if ($usageFeatures->isEmpty()) {
        $usageFeatures = collect([
            'কৃত্রিম উপাদান নেই',
            'প্রাকৃতিক উপাদান',
            'প্রমাণিত ভেষজ প্রণালী',
        ]);
    }

    /*
    |--------------------------------------------------------------------------
    | Reviews
    |--------------------------------------------------------------------------
    */

    $reviewScreenshots = collect(
        data_get(
            $reviews,
            'screenshots',
            []
        )
    )
        ->map(
            fn ($reference) =>
                $mediaUrl($reference)
        )
        ->filter()
        ->unique()
        ->values();

    if ($reviewScreenshots->isEmpty()) {
        $reviewScreenshots = collect(
            data_get(
                $reviews,
                'items',
                []
            )
        )
            ->map(
                function ($item) use ($mediaUrl) {
                    return $mediaUrl(
                        data_get(
                            $item,
                            'image'
                        )
                        ?: data_get(
                            $item,
                            'image_url'
                        )
                    );
                }
            )
            ->filter()
            ->unique()
            ->values();
    }

    /*
    |--------------------------------------------------------------------------
    | Product variants
    |--------------------------------------------------------------------------
    */

    $variants = collect(
        $product->activeVariants
        ?? []
    );

    $defaultVariant =
        $variants->firstWhere(
            'is_default',
            true
        )
        ?: $variants->first();

    if (
        $product->has_variants
        &&
        $defaultVariant
    ) {
        $initialPrice =
            (float) (
                $defaultVariant->sale_price
                ?? $defaultVariant->regular_price
                ?? 0
            );

        $initialRegularPrice =
            (float) (
                $defaultVariant->regular_price
                ?? $initialPrice
            );
    } else {
        $initialPrice =
            (float) (
                $product->sale_price
                ?? $product->regular_price
                ?? 0
            );

        $initialRegularPrice =
            (float) (
                $product->regular_price
                ?? $initialPrice
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Maximum quantity
    |--------------------------------------------------------------------------
    */

    $maxQuantity = 100;

    if (!$product->pre_order_enabled) {
        if (
            $product->has_variants
            &&
            $defaultVariant
            &&
            $defaultVariant->track_stock
        ) {
            $maxQuantity =
                max(
                    1,
                    min(
                        100,
                        (int) $defaultVariant
                            ->stock_quantity
                    )
                );
        } elseif (
            !$product->has_variants
            &&
            $product->track_stock
        ) {
            $maxQuantity =
                max(
                    1,
                    min(
                        100,
                        (int) $product
                            ->stock_quantity
                    )
                );
        }
    }

    /*
    |--------------------------------------------------------------------------
    | Order product options
    |--------------------------------------------------------------------------
    */

    $productOptions = collect();

    if (
        $product->has_variants
        &&
        $variants->isNotEmpty()
    ) {
        foreach (
            $variants
            as $variant
        ) {
            $price =
                (float) (
                    $variant->sale_price
                    ?? $variant->regular_price
                    ?? 0
                );

            $regularPrice =
                (float) (
                    $variant->regular_price
                    ?? $price
                );

            $maximum = 100;

            if (
                !$product->pre_order_enabled
                &&
                $variant->track_stock
            ) {
                $maximum =
                    max(
                        1,
                        min(
                            100,
                            (int) $variant
                                ->stock_quantity
                        )
                    );
            }

            $image =
                $productMainImage;

            if (
                filled(
                    $variant->image
                    ?? null
                )
            ) {
                $image =
                    $productMediaUrl(
                        $variant->image
                    );
            }

            $productOptions->push([
                'variant_id' =>
                    $variant->id,

                'name' =>
                    $variant->name,

                'description' =>
                    $variant->description
                    ?? null,

                'price' =>
                    $price,

                'regular_price' =>
                    $regularPrice,

                'max_quantity' =>
                    $maximum,

                'image' =>
                    $image,

                'selected' =>
                    $defaultVariant
                    &&
                    (int) $defaultVariant->id
                    ===
                    (int) $variant->id,
            ]);
        }
    } else {
        $productOptions->push([
            'variant_id' =>
                null,

            'name' =>
                $product->name,

            'description' =>
                strip_tags(
                    (string) (
                        $product->short_description
                        ?? ''
                    )
                ),

            'price' =>
                $initialPrice,

            'regular_price' =>
                $initialRegularPrice,

            'max_quantity' =>
                $maxQuantity,

            'image' =>
                $productMainImage,

            'selected' =>
                true,
        ]);
    }

    /*
    |--------------------------------------------------------------------------
    | Delivery
    |--------------------------------------------------------------------------
    */

    $deliveryAreaList =
        collect(
            $deliveryAreas
            ?? []
        )
            ->values();

    $landingPageFreeShipping = filter_var(
        data_get(
            $orderContent,
            'free_shipping',
            false
        ),
        FILTER_VALIDATE_BOOLEAN
    );

    /*
    |--------------------------------------------------------------------------
    | Footer & WhatsApp
    |--------------------------------------------------------------------------
    */

    $whatsapp = preg_replace(
        '/\D+/',
        '',
        (string) data_get(
            $footer,
            'whatsapp_number',
            ''
        )
    );

    $phone = preg_replace(
        '/\D+/',
        '',
        (string) data_get(
            $footer,
            'phone_number',
            $whatsapp
        )
    );

    /*
    |--------------------------------------------------------------------------
    | JS config
    |--------------------------------------------------------------------------
    */

    $landingJs = [
        'preview' =>
            (bool) (
                $previewMode
                ?? false
            ),

        'pageId' =>
            (int) $landingPage->id,

        'productId' =>
            (int) $product->id,

        'productName' =>
            $product->name,

        'basePrice' =>
            $initialPrice,

        'maxQuantity' =>
            $maxQuantity,

        'freeShipping' =>
            $landingPageFreeShipping,

        'heroImages' =>
            $heroImages
                ->values()
                ->all(),

        'reviewImages' =>
            $reviewScreenshots
                ->values()
                ->all(),

        'csrf' =>
            csrf_token(),

        'quoteUrl' =>
            route(
                'landing-pages.quote',
                $landingPage
            ),

        'incompleteUrl' =>
            route(
                'landing-pages.incomplete',
                $landingPage
            ),

        'orderUrl' =>
            route(
                'landing-pages.order',
                $landingPage
            ),

        'successTitle' =>
            data_get(
                $orderContent,
                'success_title',
                'অর্ডার সফল হয়েছে'
            ),

        'successText' =>
            data_get(
                $orderContent,
                'success_text',
                'ধন্যবাদ। আপনার অর্ডার সফলভাবে গ্রহণ করা হয়েছে।'
            ),
    ];
@endphp

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $metaTitle }}</title>
    <meta name="description" content="{{ $metaDescription }}">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    <!-- AOS CSS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<style>
/*
|--------------------------------------------------------------------------
| Root
|--------------------------------------------------------------------------
*/
:root {
    --primary: {{ $theme['primary'] }};
    --primary-dark: {{ $theme['primary_dark'] }};
    --secondary: {{ $theme['secondary'] }};
    --accent: {{ $theme['accent'] }};
    --accent-dark: {{ $theme['accent_dark'] }};
    --light-green: {{ $theme['light_green'] }};
    --cream: {{ $theme['cream'] }};
    --surface: {{ $theme['surface'] }};
    --text: {{ $theme['text'] }};
    --muted: {{ $theme['muted'] }};
    --border: {{ $theme['border'] }};
    --content-width: 840px;
}

/*
|--------------------------------------------------------------------------
| Reset & Base
|--------------------------------------------------------------------------
*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    background: #ffffff;
    font-family: "Hind Siliguri", sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }

/*
|--------------------------------------------------------------------------
| Main Layout
|--------------------------------------------------------------------------
*/
.lp-page {
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    /* Dotted background from the content area through the section before footer */
    background-image: radial-gradient(circle, rgba(17, 24, 39, .12) 1px, transparent 1.15px);
    background-size: 11px 11px;
    background-position: 0 0;
}
.lp-inner {
    width: min(calc(100% - 32px), var(--content-width));
    margin-left: auto; margin-right: auto;
}
.lp-section { position: relative; width: 100%; }
.preview-bar {
    position: sticky; top: 0; z-index: 99999; padding: 9px 15px;
    color: #ffffff; background: #111827; text-align: center;
    font-size: 13px; font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| Continuous Animations
|--------------------------------------------------------------------------
*/
@keyframes btn-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes mobile-btn-pulse {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
    100% { transform: translateX(-50%) scale(1); }
}
@keyframes btn-shine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes wa-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); transform: scale(1); }
    50% { transform: scale(1.05); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); transform: scale(1); }
}

/*
|--------------------------------------------------------------------------
| Button Overhauls (Yellow & Green)
|--------------------------------------------------------------------------
*/
.order-yellow-button, .nb-btn-order {
    padding: 12px 32px;
    border: none;
    border-radius: 50px;
    color: #111;
    background: linear-gradient(135deg, #ffde00, #ffaa00, #ffde00);
    background-size: 200% auto;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 6px 15px rgba(255, 170, 0, 0.4);
    transition: all 0.3s ease;
    animation: btn-pulse 2s infinite, btn-shine 3s infinite linear;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nb-btn-iso, .certificate-button {
    padding: 12px 28px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #71b826, #4e9500, #71b826);
    background-size: 200% auto;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    box-shadow: 0 6px 15px rgba(78, 149, 0, 0.4);
    transition: all 0.3s ease;
    animation: btn-shine 3s infinite linear reverse;
}
.place-order-button {
    width: 100%;
    min-height: 54px;
    margin-top: 15px;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #579b00, #3c6e00, #579b00);
    background-size: 200% auto;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 6px 20px rgba(87, 155, 0, 0.4);
    animation: btn-pulse 2s infinite, btn-shine 3s infinite linear;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.place-order-button:disabled { opacity: .6; animation: none; }

/* ... HERO CSS ... */
.hero-section { overflow: hidden; padding-top: 22px; background: linear-gradient(180deg, #fbfff2 0%, #f3ffdf 34%, #eaffc8 100%); }
.hero-content { text-align: center; }
.hero-brand { margin-bottom: 3px; color: #9b9b8b; font-family: Georgia, serif; font-size: 22px; }
.hero-title { margin-top: 5px; margin-bottom: 13px; line-height: .96; }
.hero-title span { display: block; width: fit-content; margin: 0 auto; padding: 0 9px; font-weight: 700; text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 4px 0 #000; }
.hero-title-1 { color: #ffc642; font-size: clamp(40px, 4.2vw, 57px); }
.hero-title-2 { color: #ff8b80; font-size: clamp(40px, 4.2vw, 57px); }
.hero-title-3 { color: #7ed51e; font-size: clamp(36px, 3.8vw, 53px); }
.hero-stars { margin: 18px 0 10px; color: #ffac32; font-size: 15px; letter-spacing: 2px; }
.promise-box { position: relative; width: min(470px, 100%); margin: 0 auto 33px; padding: 14px 22px 29px; border: 1px solid #f3ce8a; border-radius: 5px; color: #333; background: #fff9e9; font-size: 18px; font-weight: 600; line-height: 1.25; }
.refund-badge { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 45px); padding: 8px 22px; border: 5px solid #fff8e8; border-radius: 3px; color: #ffffff; background: linear-gradient(180deg, #69bd00, #4e9500); font-size: 20px; font-weight: 700; white-space: nowrap; }
.customer-heading { margin-top: 3px; color: #68ba00; font-size: clamp(36px, 3.5vw, 47px); font-weight: 700; line-height: 1.1; }
.customer-pill { width: fit-content; max-width: 100%; margin: 11px auto 3px; padding: 8px 19px 8px 8px; display: flex; align-items: center; gap: 10px; border: 1px solid #d6dade; border-radius: 60px; background: #ffffff; box-shadow: 0 3px 8px rgba(0, 0, 0, .04); }
.customer-avatars { display: flex; align-items: center; }
.customer-avatar { width: 43px; height: 43px; margin-left: -8px; overflow: hidden; border: 3px solid #ffffff; border-radius: 50%; background: #eee; }
.customer-avatar:first-child { margin-left: 0; }
.customer-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.customer-badge { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #111; background: #ffbd18; font-size: 11px; font-weight: 700; line-height: 1; }
.customer-count { color: #11234a; font-size: clamp(23px, 2.1vw, 30px); font-weight: 700; white-space: nowrap; }
.hero-arrow { position: relative; width: 82px; height: 72px; margin: 2px auto -2px; }
.hero-arrow::before { content: ""; position: absolute; left: 21px; top: 3px; width: 40px; height: 48px; border-left: 3px dashed #111; border-bottom: 3px dashed #111; border-radius: 0 0 0 45px; transform: rotate(-26deg); }
.hero-arrow::after { content: ""; position: absolute; right: 9px; bottom: 7px; width: 15px; height: 15px; border-right: 3px solid #111; border-bottom: 3px solid #111; transform: rotate(24deg); }
.hero-gallery { width: min(830px, 100%); height: 600px; margin: 0 auto; }
.heroSwiper { width: 100%; height: 100%; overflow: hidden; }
.heroSwiper .swiper-slide { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.hero-image-button { position: relative; width: 100%; height: 100%; padding: 0; display: flex; align-items: flex-end; justify-content: center; border: 0; background: transparent; }
.hero-image { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform .25s ease; }
.hero-image-button:hover .hero-image { transform: scale(1.018); }
.image-plus { position: absolute; left: 50%; top: 50%; z-index: 5; width: 58px; height: 58px; transform: translate(-50%, -50%) scale(.7); display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .65); font-family: Arial, sans-serif; font-size: 38px; opacity: 0; pointer-events: none; transition: .2s ease; }
.hero-image-button:hover .image-plus, .review-button:hover .image-plus { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/*
|--------------------------------------------------------------------------
| Benefits Section
|--------------------------------------------------------------------------
*/
.benefits-section {
    padding: 32px 0 54px;
    overflow: hidden;
    background: transparent;
}
.benefits-section .lp-inner {
    width: min(calc(100% - 32px), 920px);
}
.benefits-title {
    color: #4f9800;
    text-align: center;
    font-size: clamp(36px, 4.6vw, 58px);
    font-weight: 700;
    line-height: 1.05;
}
.benefits-subtitle {
    margin-top: 7px;
    color: #07152f;
    text-align: center;
    font-size: clamp(25px, 3.1vw, 39px);
    font-weight: 700;
    line-height: 1.1;
}
.benefit-arrow-svg {
    display: block;
    width: 42px;
    height: auto;
    margin: 12px auto 10px;
}
.nb-diagram {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 70px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}
.nb-top-box {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 205px;
    padding: 0 26px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    border: 1px solid #97c851;
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #e9f9ce 0%, #eefbd9 52%, #ffffff 100%);
    overflow: visible;
}
.nb-label {
    position: relative;
    z-index: 7;
    max-width: calc(50% - 115px);
    padding: 0 8px;
    transform: translateY(-56%);
    color: #090909;
    background: #ffffff;
    font-size: clamp(25px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.03;
    white-space: normal;
    word-break: break-word;
}
.nb-bottle-wrapper {
    position: absolute;
    top: -176px;
    left: 50%;
    z-index: 6;
    width: 190px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.nb-bottle-img {
    width: 100%;
    max-width: 176px;
    max-height: 255px;
    height: auto;
    object-fit: contain;
    object-position: center;
    transform: rotate(24deg);
    transform-origin: 50% 58%;
    filter: drop-shadow(0 16px 14px rgba(0,0,0,.20));
}
.nb-lab-badge {
    position: absolute;
    top: 114px;
    right: -12px;
    z-index: 8;
    width: 98px;
    height: 98px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    background: #00876f;
    font-size: 21px;
    font-weight: 800;
    line-height: .98;
    box-shadow: 0 5px 14px rgba(0,0,0,.16);
}
.nb-lab-badge i {
    position: absolute;
    top: -7px;
    right: -7px;
    border-radius: 50%;
    color: #00876f;
    background: #ffffff;
    font-size: 28px;
}
.nb-grid {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: -26px;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
}
.nb-grid::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 2px;
    transform: translateX(-50%);
    background: #111111;
}
.nb-item { position: relative; z-index: 2; }
.nb-item.left { grid-column: 1 / 2; justify-self: end; }
.nb-item.right { grid-column: 3 / 4; justify-self: start; }
.nb-card {
    max-width: 340px;
    padding: 12px 18px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #222222;
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,.06);
    font-size: clamp(15px, 2.2vw, 21px);
    font-weight: 600;
    line-height: 1.2;
}
.nb-item.left .nb-card { text-align: right; }
.nb-item.right .nb-card { text-align: left; }
.nb-item.left::after { content: ''; position: absolute; top: 50%; right: -32px; width: 32px; height: 2px; background: #111; transform: translateY(-50%); }
.nb-item.left::before { content: ''; position: absolute; top: calc(50% - 5px); right: -37px; width: 10px; height: 10px; background: #111; border-radius: 50%; z-index: 3; }
.nb-item.right::after { content: ''; position: absolute; top: 50%; left: -32px; width: 32px; height: 2px; background: #111; transform: translateY(-50%); }
.nb-item.right::before { content: ''; position: absolute; top: calc(50% - 5px); left: -37px; width: 10px; height: 10px; background: #111; border-radius: 50%; z-index: 3; }
.nb-row-1 { grid-row: 1; margin-top: 68px; }
.nb-row-2 { grid-row: 2; margin-top: -12px; }
.nb-row-3 { grid-row: 3; margin-top: -12px; }
.nb-row-4 { grid-row: 4; margin-top: -12px; }
.nb-row-5 { grid-row: 5; margin-top: -12px; }
.nb-row-6 { grid-row: 6; margin-top: -12px; }
.nb-actions { display: flex; justify-content: center; gap: 15px; margin-top: 30px; }

/* ... REST OF CSS ... */
.promo-section { padding: 12px 0 42px; }
.promo-card { overflow: hidden; border-radius: 10px; background: #ffffff; }
.promo-card img { width: 100%; max-height: 730px; object-fit: contain; object-position: center; }
.center-order-button { margin-top: 18px; text-align: center; }
.usage-section { padding: 24px 0 73px; }
.usage-title { margin-bottom: 53px; color: #4a4a4a; text-align: center; font-size: clamp(42px, 4vw, 55px); font-weight: 700; }
.usage-card { position: relative; padding: 60px 22px 15px; border: 1px solid #94c44b; border-radius: 10px; background: linear-gradient(180deg, #e4ffc0, #f6ffe8); text-align: center; }
.usage-pin { position: absolute; left: 50%; top: -45px; width: 90px; height: 90px; transform: translateX(-50%); display: grid; place-items: center; border-radius: 50%; color: #ffbc00; background: #282828; font-size: 40px; }
.usage-copy { color: #3e3e3e; font-size: 27px; font-weight: 600; line-height: 1.25; }
.usage-highlight { color: #4d9500; font-weight: 700; }
.usage-underline { width: 270px; height: 15px; margin: -2px auto 3px; border-top: 3px solid #303030; border-radius: 50%; }
.usage-features { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.usage-feature { min-height: 56px; padding: 9px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 2px; color: #ffffff; background: #4f9300; font-size: 19px; font-weight: 600; }
.review-section { padding: 26px 0 70px; }
.reviewSwiper { width: 100%; overflow: hidden; }
.review-button { position: relative; width: 100%; padding: 0; overflow: hidden; border: 1px solid #dedede; border-radius: 8px; background: #ffffff; }
.review-button img { width: 100%; height: 330px; object-fit: cover; object-position: top center; }
.review-order { margin-top: 25px; text-align: center; }
.order-section { padding: 0 0 46px; }
.order-head { padding: 25px 30px 38px; border-radius: 15px 15px 0 0; color: #ffffff; background: linear-gradient(180deg, #4f9000, #4a8700); text-align: center; }
.order-icon { width: 62px; height: 62px; margin: 0 auto 11px; display: grid; place-items: center; border-radius: 50%; color: var(--primary); background: #ffffff; font-size: 28px; }
.order-head h2 { font-size: 31px; font-weight: 700; }
.order-head p { margin-top: 3px; font-size: 19px; }
.order-guarantee { width: fit-content; margin: 13px auto -56px; padding: 8px 35px; border-radius: 5px; color: #222; background: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,.10); font-size: 18px; font-weight: 700; }
.order-guarantee strong { color: #e31f26; }
.order-form-box { position: relative; z-index: 3; margin-top: 18px; padding: 40px 18px 28px; border: 1px solid #d6d6d6; border-radius: 15px; background: #ffffff; }
.products-title { margin-bottom: 17px; color: #111; font-family: Arial, sans-serif; font-size: 20px; font-weight: 700; }
.product-options { overflow: hidden; border: 1px solid #ffbd00; border-radius: 4px; background: #fff9e8; }
.product-option { position: relative; min-height: 90px; padding: 9px 12px; display: grid; grid-template-columns: 26px 58px minmax(0, 1fr) 93px 74px; align-items: center; gap: 9px; border-bottom: 1px solid #ffbd00; cursor: pointer; }
.product-option:last-child { border-bottom: 0; }
.product-option.is-selected { background: #fff7df; }
.option-radio { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #b8c0c8; border-radius: 50%; background: #ffffff; }
.product-option.is-selected .option-radio::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #72b900; }
.option-image { width: 58px; height: 58px; object-fit: contain; background: #ffffff; }
.option-name { display: block; color: #111; font-size: 14px; font-weight: 500; }
.option-description { display: block; margin-top: 2px; color: #777; font-size: 12px; line-height: 1.15; }
.option-qty { display: flex; justify-content: center; border: 1px solid #d1d7dd; border-radius: 3px; background: #fff; }
.option-qty button, .option-qty span { width: 30px; height: 31px; display: grid; place-items: center; }
.option-qty button { border: 0; color: #667085; background: #ffffff; }
.option-qty span { border-left: 1px solid #d1d7dd; border-right: 1px solid #d1d7dd; }
.option-price { color: #333; text-align: right; font-size: 13px; white-space: nowrap; }
.option-old-price { display: block; color: #777; font-size: 11px; text-decoration: line-through; }
.checkout-grid { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .92fr); gap: 50px; }
.checkout-title { margin-bottom: 18px; color: #4f9000; font-family: Arial, sans-serif; font-size: 20px; font-weight: 700; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 6px; color: #111; font-size: 15px; font-weight: 600; }
.required { color: #df1f26; }
.form-control { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #9fd058; border-radius: 4px; outline: none; color: #111; background: #f1ffdd; }
textarea.form-control { min-height: 88px; resize: vertical; }
.form-control:focus { border-color: #63a800; box-shadow: 0 0 0 3px rgba(96,160,0,.10); }
.field-error { display: block; min-height: 15px; margin-top: 3px; color: #dc2626; font-size: 11px; }
.shipping-wrap { margin-top: 38px; }
.shipping-heading-row { margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.shipping-heading-row .shipping-heading { margin-bottom:0; }
.shipping-free-badge { padding:5px 10px; border:1px solid #8ac04a; border-radius:999px; color:#3c7000; background:#efffdb; font-size:12px; font-weight:700; white-space:nowrap; }
.shipping-heading { margin-bottom: 16px; font-family: Arial, sans-serif; font-size: 20px; font-weight: 700; }
.delivery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.delivery-card { position: relative; min-height: 49px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #d1d6dc; border-radius: 4px; color: #666; background: #ffffff; cursor: pointer; }
.delivery-card input { position: absolute; opacity: 0; }
.delivery-card.is-selected { color:#1f2937; border-color:#ff7417; background:#fff3ea; box-shadow:0 0 0 1px rgba(255,116,23,.08); }
.delivery-left { display: flex; align-items: center; gap: 8px; }
.delivery-dot { width: 16px; height: 16px; border: 1px solid #b7c0c8; border-radius: 50%; background: #fff; }
.delivery-card.is-selected .delivery-dot { border:5px solid #ff7417; }
.delivery-price { color:#ff7417; font-size:13px; font-weight:700; }
.order-summary-title { margin-bottom: 20px; color: #4f9000; font-family: Arial, sans-serif; font-size: 20px; font-weight: 700; }
.summary-heading { padding-bottom: 10px; display: grid; grid-template-columns: 1fr 88px; border-bottom: 1px dashed #ccc; font-size: 13px; font-weight: 700; }
.summary-product-row { padding: 10px 0; display: grid; grid-template-columns: 45px minmax(0,1fr) 30px 61px; align-items: center; gap: 7px; border-bottom: 1px dashed #ccc; }
.summary-image-wrap { position: relative; }
.summary-image { width: 45px; height: 45px; object-fit: contain; background: #fff; }
.summary-remove { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; display: grid; place-items: center; border: 1px solid #999; border-radius: 50%; color: #666; background: #fff; font-size: 8px; }
.summary-name { font-size: 13px; }
.summary-quantity { font-size: 12px; }
.summary-price { text-align: right; font-size: 12px; }
.summary-row { padding: 9px 0; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed #ccc; font-size: 13px; }
.summary-row.total { border-bottom: 0; font-weight: 700; }
.payment-box { margin-top: 27px; padding: 17px 15px; background: #f6f6f6; }
.payment-title { margin-bottom: 20px; font-size: 14px; }
.payment-description { position: relative; padding: 14px; color: #666; background: #e8e8e8; font-size: 12px; }
.payment-description::before { content: ""; position: absolute; left: 27px; top: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #e8e8e8; }

.footer { padding: 31px 20px 35px; color: #ffffff; background: #171717; text-align: center; }
.footer-heading { font-size: 19px; font-weight: 600; }
.footer-links { margin: 17px 0 21px; display: flex; justify-content: center; gap: 5px; }
.footer-links a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 3px; color: #151515; background: #ffffff; font-size: 20px; }
.footer-copy { font-size: 12px; font-weight: 600; line-height: 1.5; }
.image-modal { position: fixed; inset: 0; z-index: 50000; display: flex; flex-direction: column; background: rgba(0,0,0,.96); }
.image-modal[hidden] { display: none; }
.modal-toolbar { min-height: 58px; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; color: #ffffff; border-bottom: 1px solid rgba(255,255,255,.10); }
.modal-counter { padding: 5px 10px; border-radius: 30px; background: rgba(255,255,255,.10); font-size: 12px; }
.modal-close { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.14); font-family: Arial, sans-serif; font-size: 27px; }
.modal-stage { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; align-items: center; justify-content: center; }
.modal-image { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; transform: scale(1); transform-origin: center; user-select: none; }
.lp-toast { position: fixed; left: 50%; top: 20px; z-index: 60000; width: min(calc(100% - 30px), 430px); transform: translateX(-50%); padding: 11px 15px; border-radius: 5px; color: #fff; background: #4f9000; text-align: center; box-shadow: 0 9px 25px rgba(0,0,0,.18); }
.lp-toast.is-error { background: #b91c1c; }
.lp-toast[hidden] { display: none; }

/* Mobile Sticky Order Button */
.mobile-order-button { 
    position: fixed; left: 50%; bottom: 15px; z-index: 9000; 
    width: min(calc(100% - 24px), 450px); min-height: 51px; 
    transform: translateX(-50%); display: none; align-items: center; justify-content: center; gap: 8px; 
    border-radius: 50px; color: #111; 
    background: linear-gradient(135deg, #ffde00, #ffb300, #ffde00);
    background-size: 200% auto;
    box-shadow: 0 9px 25px rgba(255, 179, 0, 0.4); font-size: 18px; font-weight: 800; text-transform: uppercase;
    animation: mobile-btn-pulse 2s infinite, btn-shine 3s infinite linear;
}

/* 
|--------------------------------------------------------------------------
| WhatsApp Live Chat Icon 
|--------------------------------------------------------------------------
*/
.wa-live-chat {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 50%;
    color: #ffffff;
    background-color: #25d366;
    font-size: 35px;
    box-shadow: 0 6px 18px rgba(0,0,0,.24);
    z-index: 9999;
    animation: wa-pulse 2s infinite;
    transition: transform .3s ease, background-color .3s ease;
}
.wa-live-chat:hover {
    background-color: #128C7E;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) and (max-width: 1024px) {
    :root { --content-width: 760px; }
    .hero-gallery { height: 530px; }
    .checkout-grid { gap: 30px; }

    .benefits-section .lp-inner { width: min(calc(100% - 28px), 860px); }
    /* .nb-diagram { margin-top: 132px; } */
    .nb-top-box { height: 185px; padding: 0 20px; }
    .nb-label { max-width: calc(50% - 96px); font-size: clamp(22px, 2.8vw, 32px); }
    .nb-bottle-wrapper { top: -158px; width: 176px; }
    .nb-bottle-img { max-width: 160px; max-height: 228px; }
    .nb-lab-badge { top: 104px; right: -10px; width: 88px; height: 88px; font-size: 18px; }
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/
@media (max-width: 767px) {
    .delivery-grid { grid-template-columns:1fr; }

    :root { --content-width: 100%; }
    .lp-inner { width: calc(100% - 20px); }
    .hero-section { padding-top: 18px; }
    .hero-brand { font-size: 19px; }
    .hero-title { margin-bottom: 8px; }
    .hero-title-1, .hero-title-2 { font-size: clamp(30px, 9vw, 42px); }
    .hero-title-3 { font-size: clamp(27px, 8.2vw, 38px); }
    .hero-title span { padding: 0 5px; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 0 #000; }
    .hero-stars { margin: 13px 0 8px; }
    .promise-box { width: 100%; margin-bottom: 31px; padding: 12px 13px 28px; font-size: 15px; }
    .refund-badge { padding: 7px 13px; border-width: 4px; font-size: 16px; }
    .customer-heading { font-size: clamp(30px, 8.8vw, 39px); }
    .customer-pill { padding: 6px 13px 6px 6px; gap: 6px; }
    .customer-avatar { width: 34px; height: 34px; }
    .customer-badge { width: 38px; height: 38px; font-size: 9px; }
    .customer-count { font-size: clamp(18px, 5.4vw, 24px); }
    .hero-arrow { height: 61px; transform: scale(.85); }
    .hero-gallery { height: 365px; }

    /* Benefits Diagram Mobile Adjustments */
    .benefits-section { padding: 26px 0 38px; }
    .benefits-section .lp-inner { width: calc(100% - 20px); }
    .benefits-title { font-size: clamp(30px, 9.5vw, 42px); }
    .benefits-subtitle { margin-top: 5px; font-size: clamp(21px, 6.6vw, 30px); }
    .benefit-arrow-svg { width: 34px; margin: 9px auto 8px; }
    /* .nb-diagram { margin-top: 100px; } */
    .nb-top-box { width: 100%; height: 118px; padding: 0 8px; border-radius: 13px 13px 0 0; }
    .nb-label { max-width: calc(50% - 44px); padding: 0 3px; transform: translateY(-55%); font-size: clamp(14px, 4.9vw, 20px); }
    .nb-bottle-wrapper { top: -116px; width: 126px; }
    .nb-bottle-img { max-width: 114px; max-height: 170px; }
    .nb-lab-badge { top: 73px; right: -12px; width: 62px; height: 62px; border-width: 3px; font-size: 12px; }
    .nb-lab-badge i { top: -5px; right: -5px; font-size: 19px; }
    .nb-grid { grid-template-columns: 1fr 40px 1fr; margin-top: -10px; }
    .nb-item.left::after { width: 20px; right: -20px; }
    .nb-item.left::before { right: -25px; width: 10px; height: 10px; top: calc(50% - 5px); }
    .nb-item.right::after { width: 20px; left: -20px; }
    .nb-item.right::before { left: -25px; width: 10px; height: 10px; top: calc(50% - 5px); }
    .nb-card { max-width: 100%; padding: 9px 7px; font-size: clamp(11px, 3.6vw, 15px); }
    .nb-row-1 { margin-top: 42px; }
    .nb-row-2, .nb-row-3, .nb-row-4, .nb-row-5, .nb-row-6 { margin-top: -8px; }
    .nb-actions { gap: 9px; margin-top: 22px; }

    .promo-section { padding-bottom: 32px; }
    .promo-card img { max-height: none; }
    .usage-section { padding: 17px 0 52px; }
    .usage-title { margin-bottom: 43px; font-size: clamp(34px, 9vw, 44px); }
    .usage-card { padding: 45px 9px 9px; }
    .usage-pin { top: -31px; width: 62px; height: 62px; font-size: 28px; }
    .usage-copy { font-size: clamp(17px, 4.7vw, 22px); }
    .usage-underline { width: 170px; border-top-width: 2px; }
    .usage-features { margin-top: 27px; gap: 6px; }
    .usage-feature { min-height: 36px; padding: 5px 4px; gap: 4px; font-size: clamp(10px, 2.8vw, 13px); }
    .review-section { padding: 15px 0 45px; }
    .review-button img { height: auto; max-height: none; object-fit: contain; }
    .order-section { padding-bottom: 0; }
    .order-head { padding: 20px 12px 34px; border-radius: 13px 13px 0 0; }
    .order-icon { width: 48px; height: 48px; font-size: 21px; }
    .order-head h2 { font-size: 23px; }
    .order-head p { font-size: 15px; line-height: 1.25; }
    .order-guarantee { max-width: calc(100% - 35px); margin-bottom: -52px; padding: 7px 12px; font-size: 13px; }
    .order-form-box { margin-top: 18px; padding: 38px 8px 25px; border-radius: 14px; }
    .products-title { font-size: 18px; }
    .product-option { min-height: 100px; padding: 8px 5px; grid-template-columns: 20px 58px minmax(0,1fr) 72px; gap: 5px; }
    .option-image { width: 58px; height: 58px; }
    .option-qty { grid-column: 3; width: fit-content; margin-top: 5px; }
    .option-price { grid-column: 4; grid-row: 1 / 3; }
    .checkout-grid { margin-top: 31px; display: flex; flex-direction: column; gap: 55px; }
    .checkout-left, .checkout-right { width: 100%; padding: 0 17px; }
    .shipping-wrap { margin-top: 53px; }
    .summary-product-row { grid-template-columns: 50px minmax(0,1fr) 28px 56px; }
    .summary-image { width: 50px; height: 50px; }
    .payment-box { margin-top: 28px; }
    .mobile-order-button { display: flex; }
    .footer { padding-bottom: 88px; }
    .wa-live-chat { right: 12px; bottom: 76px; width: 50px; height: 50px; border-width: 2px; font-size: 29px; }

    .nb-bottle-wrapper {
    position: absolute;
    top: -38px !important;
    left: 29%;
    z-index: 6;
    width: 190px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    pointer-events: none;
}
}

@media (max-width: 380px) {
    .lp-inner { width: calc(100% - 14px); }
    .hero-title-1, .hero-title-2 { font-size: 29px; }
    .hero-title-3 { font-size: 27px; }
    .refund-badge { font-size: 13px; padding: 6px 9px; }
    .customer-count { font-size: 17px; }
    .customer-avatar:nth-child(n+4) { display: none; }
    .hero-gallery { height: 315px; }
    .nb-diagram { margin-top: 95px; }
    .nb-label { max-width: calc(50% - 38px); font-size: 13px; }
    .nb-bottle-wrapper { top: -108px; width: 118px; }
    .nb-bottle-img { max-width: 106px; max-height: 156px; }
    .nb-lab-badge { top: 69px; right: -10px; width: 58px; height: 58px; font-size: 11px; }
    .nb-card { font-size: 11px; padding: 6px 8px; }
    .usage-feature { font-size: 9px; }
    .checkout-left, .checkout-right { padding: 0 10px; }

    .nb-bottle-wrapper {
    position: absolute;
    top: -38px !important;
    left: 29%;
    z-index: 6;
    width: 190px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    pointer-events: none;
}
}
</style>
</head>
<body>

@if($previewMode ?? false)
    <div class="preview-bar">
        ADMIN PREVIEW MODE — এখানে Order submit হবে না
    </div>
@endif

<div class="lp-page">

@foreach($orderedSections as $section)
    @php
        $content = (array) $section->content;
    @endphp

    {{-- ================================================================
        HERO
    ================================================================= --}}
    @if($section->type === 'hero')
        <section class="lp-section hero-section">
            <div class="lp-inner hero-content" data-aos="fade-up">
                <div class="hero-brand">
                    {{ data_get($content, 'brand_name', 'Takfree') }}
                </div>
                <h1 class="hero-title">
                    <span class="hero-title-1">
                        {{ data_get($content, 'title_1', 'মাত্র ২১ দিনেই') }}
                    </span>
                    <span class="hero-title-2">
                        {{ data_get($content, 'title_2', 'ব্যথা থেকে স্বস্তি মিলবে') }}
                    </span>
                    <span class="hero-title-3">
                        {{ data_get($content, 'title_3', $product->name) }}
                    </span>
                </h1>
                <div class="hero-stars">
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                </div>
                <div class="promise-box">
                    {{ data_get($content, 'promise_text', strip_tags((string) ($product->short_description ?: 'আপনার পণ্যের প্রধান সুবিধা এখানে লিখুন'))) }}
                    <div class="refund-badge">
                        {{ data_get($content, 'refund_text', 'উপকার না পেলে ১০০% টাকা ফেরত') }}
                    </div>
                </div>
                <div class="customer-heading">
                    {{ data_get($content, 'customer_heading', 'উপকৃত হয়েছেন') }}
                </div>
                <div class="customer-pill">
                    @if($customerAvatars->isNotEmpty())
                        <div class="customer-avatars">
                            @foreach($customerAvatars->take(4) as $avatar)
                                <div class="customer-avatar">
                                    <img src="{{ $avatar }}" alt="Customer" loading="lazy">
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <div class="customer-badge">০২<br>লক্ষ+</div>
                    <div class="customer-count">
                        {{ data_get($content, 'customer_count', 'কাস্টমারস') }}
                    </div>
                </div>
                <div class="hero-arrow"></div>
                <div class="hero-gallery">
                    <div class="swiper heroSwiper" id="heroSwiper">
                        <div class="swiper-wrapper">
                            @foreach($heroImages as $index => $image)
                                <div class="swiper-slide">
                                    <button type="button" class="hero-image-button js-open-image" data-image-group="hero" data-image-index="{{ $index }}">
                                        <img src="{{ $image['url'] }}" alt="{{ $image['alt'] }}" class="hero-image"
                                            @if($index === 0) fetchpriority="high" @else loading="lazy" @endif>
                                        <span class="image-plus">+</span>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>

    {{-- ================================================================
        BENEFITS (REDESIGNED)
    ================================================================= --}}
    @elseif($section->type === 'benefits')
        <section class="lp-section benefits-section">
            <div class="lp-inner">
                
                <h2 class="benefits-title" data-aos="zoom-in">
                    {{ data_get($content, 'heading', $product->name) }}
                </h2>
                <h3 class="benefits-subtitle" data-aos="zoom-in" data-aos-delay="100">
                    {{ data_get($content, 'subheading', 'যে সমস্যা গুলোর সমাধান করে') }}
                </h3>
                
                <svg class="benefit-arrow-svg" viewBox="0 0 30 40" xmlns="http://www.w3.org/2000/svg" data-aos="fade-down" data-aos-delay="200">
                    <path d="M5,5 Q20,15 15,35" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/>
                    <path d="M5,25 L15,35 L25,28" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/>
                </svg>

                <div class="nb-diagram">
                    
                    <div class="nb-top-box" data-aos="fade-up">
                        <span class="nb-label">{{ data_get($content, 'left_top_label', 'প্রকৃতির স্পর্শে') }}</span>
                        <span class="nb-label">{{ data_get($content, 'right_top_label', 'শরীরের সুস্থতা') }}</span>
                    </div>

                    <div class="nb-bottle-wrapper" data-aos="zoom-in" data-aos-delay="300">
                        @if(filled($productMainImage))
                            <img src="{{ $productMainImage }}" alt="{{ $product->name }}" class="nb-bottle-img" loading="lazy">
                        @endif
                        <div class="nb-lab-badge">
                            <i class="fa-solid fa-circle-check"></i>
                            LAB<br>TESTED
                        </div>
                    </div>

                    <div class="nb-grid">
                        <div class="nb-item left nb-row-1" data-aos="fade-right" data-aos-delay="400">
                            <div class="nb-card">{{ $benefits->get(0) }}</div>
                        </div>
                        <div class="nb-item right nb-row-2" data-aos="fade-left" data-aos-delay="500">
                            <div class="nb-card">{{ $benefits->get(3) }}</div>
                        </div>
                        <div class="nb-item left nb-row-3" data-aos="fade-right" data-aos-delay="600">
                            <div class="nb-card">{{ $benefits->get(1) }}</div>
                        </div>
                        <div class="nb-item right nb-row-4" data-aos="fade-left" data-aos-delay="700">
                            <div class="nb-card">{{ $benefits->get(4) }}</div>
                        </div>
                        <div class="nb-item left nb-row-5" data-aos="fade-right" data-aos-delay="800">
                            <div class="nb-card">{{ $benefits->get(2) }}</div>
                        </div>
                        <div class="nb-item right nb-row-6" data-aos="fade-left" data-aos-delay="900">
                            <div class="nb-card">{{ $benefits->get(5) }}</div>
                        </div>
                    </div>
                </div>

                <div class="nb-actions" data-aos="fade-up">
                    <button type="button" class="nb-btn-iso">
                        {{ data_get($content, 'certificate_text', 'ISO সার্টিফিকেট') }}
                    </button>
                    <button type="button" class="nb-btn-order js-scroll-order">
                        অর্ডার করুন
                    </button>
                </div>

            </div>
        </section>

    {{-- ================================================================
        PROMO
    ================================================================= --}}
    @elseif($section->type === 'promo')
        @if(filled($promoImage))
            <section class="lp-section promo-section">
                <div class="lp-inner" data-aos="fade-up">
                    <div class="promo-card">
                        <img src="{{ $promoImage }}" alt="{{ $product->name }}" loading="lazy">
                    </div>
                    <div class="center-order-button">
                        <button type="button" class="order-yellow-button js-scroll-order">
                            অর্ডার করুন
                        </button>
                    </div>
                </div>
            </section>
        @endif

    {{-- ================================================================
        USAGE
    ================================================================= --}}
    @elseif($section->type === 'usage')
        <section class="lp-section usage-section">
            <div class="lp-inner">
                <h2 class="usage-title" data-aos="fade-down">
                    {{ data_get($content, 'title', 'সহজ ব্যবহারবিধি') }}
                </h2>
                <div class="usage-card" data-aos="flip-up">
                    <div class="usage-pin"><i class="fa-solid fa-thumbtack"></i></div>
                    <div class="usage-copy">
                        {{ data_get($content, 'text', 'প্রতিদিন সকাল ও রাতে শরীরের ব্যথা আক্রান্ত স্থানে') }}
                        <span class="usage-highlight">
                            {{ data_get($content, 'highlight', '৪-৫ ফোঁটা তেল নিয়ে ভালোভাবে ম্যাসাজ করুন') }}
                        </span>
                    </div>
                    <div class="usage-underline"></div>
                    <div class="usage-features">
                        @foreach($usageFeatures->take(3) as $feature)
                            <div class="usage-feature">
                                <i class="fa-solid fa-circle-check"></i>
                                {{ $feature }}
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="center-order-button" data-aos="fade-up">
                    <button type="button" class="order-yellow-button js-scroll-order">
                        অর্ডার করুন
                    </button>
                </div>
            </div>
        </section>

    {{-- ================================================================
        REVIEWS
    ================================================================= --}}
    @elseif($section->type === 'reviews')
        @if($reviewScreenshots->isNotEmpty())
            <section class="lp-section review-section">
                <div class="lp-inner" data-aos="fade-up">
                    <div class="swiper reviewSwiper" id="reviewSwiper">
                        <div class="swiper-wrapper">
                            @foreach($reviewScreenshots as $index => $image)
                                <div class="swiper-slide">
                                    <button type="button" class="review-button js-open-image" data-image-group="reviews" data-image-index="{{ $index }}">
                                        <img src="{{ $image }}" alt="Customer Review {{ $index + 1 }}" loading="lazy">
                                        <span class="image-plus">+</span>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="review-order">
                        <button type="button" class="order-yellow-button js-scroll-order">
                            অর্ডার করুন
                        </button>
                    </div>
                </div>
            </section>
        @endif

    {{-- ================================================================
        ORDER
    ================================================================= --}}
    @elseif($section->type === 'order')
        <section class="lp-section order-section" id="order">
            <div class="lp-inner" data-aos="fade-up">
                <div class="order-head">
                    <div class="order-icon">
                        <i class="fa-solid fa-cart-shopping"></i>
                    </div>
                    <h2>
                        {{ data_get($content, 'title', 'অর্ডার ফর্ম') }}
                    </h2>
                    <p>
                        {{ data_get($content, 'subtitle', 'আপনার অর্ডারটি প্লেস করতে, অনুগ্রহ করে নিচের তথ্য গুলো দিয়ে সহযোগিতা করুন।') }}
                    </p>
                    <div class="order-guarantee">
                        বিকাশে
                        <strong>
                            ১০০% টাকা ফেরত, নিশ্চিন্তে অর্ডার করুন
                        </strong>
                    </div>
                </div>
                <form id="landingOrderForm" class="order-form-box" novalidate>
                    @csrf
                    <input type="hidden" name="token" id="checkoutToken">
                    <input type="hidden" name="variant_id" id="selectedVariantId" value="{{ optional($defaultVariant)->id }}">
                    <input type="hidden" name="quantity" id="selectedQuantity" value="1">
                    <h3 class="products-title">Your Products</h3>
                    
                    <div class="product-options" id="productOptions">
                        @foreach($productOptions as $optionIndex => $option)
                            <div class="product-option {{ $option['selected'] ? 'is-selected' : '' }}"
                                data-option-index="{{ $optionIndex }}"
                                data-variant-id="{{ $option['variant_id'] ?? '' }}"
                                data-price="{{ $option['price'] }}"
                                data-regular-price="{{ $option['regular_price'] }}"
                                data-max="{{ $option['max_quantity'] }}"
                                data-name="{{ $option['name'] }}"
                                data-image="{{ $option['image'] }}">
                                
                                <span class="option-radio"></span>
                                <img src="{{ $option['image'] }}" alt="{{ $option['name'] }}" class="option-image">
                                <div>
                                    <span class="option-name">{{ $option['name'] }}</span>
                                    @if(filled($option['description']))
                                        <small class="option-description">
                                            {{ \Illuminate\Support\Str::limit(strip_tags($option['description']), 60) }}
                                        </small>
                                    @endif
                                </div>
                                <div class="option-qty">
                                    <button type="button" class="js-option-minus">−</button>
                                    <span class="js-option-qty">1</span>
                                    <button type="button" class="js-option-plus">+</button>
                                </div>
                                <div class="option-price">
                                    @if($option['regular_price'] > $option['price'])
                                        <small class="option-old-price">
                                            {{ number_format($option['regular_price'], 0) }}৳
                                        </small>
                                    @endif
                                    <strong>{{ number_format($option['price'], 0) }}৳</strong>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    <div class="checkout-grid">
                        {{-- Billing --}}
                        <div class="checkout-left">
                            <h3 class="checkout-title">Billing details</h3>
                            <div class="form-group">
                                <label>
                                    {{ data_get($content, 'name_label', 'আপনার পূর্ণ নাম') }}
                                    <span class="required">*</span>
                                </label>
                                <input type="text" name="customer_name" class="form-control" autocomplete="name">
                                <small class="field-error" data-error-field="customer_name"></small>
                            </div>
                            <div class="form-group">
                                <label>
                                    {{ data_get($content, 'phone_label', 'আপনার ফোন নাম্বার') }}
                                    <span class="required">*</span>
                                </label>
                                <input type="tel" name="customer_phone" id="customerPhone" class="form-control" maxlength="11" inputmode="numeric" autocomplete="tel">
                                <small class="field-error" data-error-field="customer_phone"></small>
                            </div>
                            <div class="form-group">
                                <label>
                                    {{ data_get($content, 'address_label', 'বাসার পূর্ণ ঠিকানা') }}
                                    <span class="required">*</span>
                                </label>
                                <textarea name="address" class="form-control" autocomplete="street-address"></textarea>
                                <small class="field-error" data-error-field="address"></small>
                            </div>
                            <input type="hidden" name="customer_email" value="">
                            
                            <div class="shipping-wrap">
                                <div class="shipping-heading-row">
                                    <h3 class="shipping-heading">
                                        {{ data_get($content, 'delivery_heading', 'ডেলিভারি এলাকা') }}
                                    </h3>

                                    @if($landingPageFreeShipping)
                                        <span class="shipping-free-badge">
                                            <i class="fa-solid fa-truck-fast"></i>
                                            ফ্রি শিপিং
                                        </span>
                                    @endif
                                </div>
                                <div class="delivery-grid">
                                    @foreach($deliveryAreaList as $areaIndex => $area)
                                        @php
                                            $areaKey = data_get($area, 'key') ?? data_get($area, 'value') ?? data_get($area, 'code') ?? $areaIndex;
                                            $areaLabel = data_get($area, 'label') ?? data_get($area, 'name') ?? (string) $areaKey;
                                        @endphp
                                        <label class="delivery-card {{ $areaIndex === 0 ? 'is-selected' : '' }}">
                                            <input type="radio" name="delivery_area" value="{{ $areaKey }}" @checked($areaIndex === 0)>
                                            <span class="delivery-left">
                                                <span class="delivery-dot"></span>
                                                <span>{{ $areaLabel }}</span>
                                            </span>
                                            <strong class="delivery-price" data-delivery-price="{{ $areaKey }}">
                                                {{ $landingPageFreeShipping ? 'ফ্রি' : '—' }}
                                            </strong>
                                        </label>
                                    @endforeach
                                </div>
                                <small class="field-error" data-error-field="delivery_area"></small>
                            </div>
                        </div>

                        {{-- Order Summary --}}
                        <div class="checkout-right">
                            <h3 class="order-summary-title">Your order</h3>
                            <div class="summary-heading">
                                <span>Product</span>
                                <span>Subtotal</span>
                            </div>
                            <div class="summary-product-row">
                                <div class="summary-image-wrap">
                                    <span class="summary-remove">×</span>
                                    <img src="{{ $productOptions->first()['image'] ?? $productMainImage }}" alt="{{ $product->name }}" class="summary-image" id="summaryImage">
                                </div>
                                <div class="summary-name" id="summaryName">
                                    {{ $productOptions->first()['name'] ?? $product->name }}
                                </div>
                                <div class="summary-quantity" id="summaryQuantity">× 1</div>
                                <div class="summary-price" id="summaryProductPrice">
                                    {{ number_format($initialPrice, 0) }}৳
                                </div>
                            </div>
                            <div class="summary-row">
                                <span>Subtotal</span>
                                <strong id="summarySubtotal">{{ number_format($initialPrice, 0) }}৳</strong>
                            </div>
                            <div class="summary-row">
                                <span>Delivery</span>
                                <strong id="summaryDelivery">Calculating...</strong>
                            </div>
                            <div class="summary-row total">
                                <span>Total</span>
                                <strong id="summaryTotal">{{ number_format($initialPrice, 0) }}৳</strong>
                            </div>
                            <div class="payment-box">
                                <div class="payment-title">
                                    {{ data_get($content, 'payment_title', 'ক্যাশ অন ডেলিভারি (COD)') }}
                                </div>
                                <div class="payment-description">
                                    {{ data_get($content, 'payment_text', 'পণ্য হাতে পেয়ে মূল্য পরিশোধ করবেন।') }}
                                </div>
                            </div>
                            <button type="submit" id="placeOrderButton" class="place-order-button" @disabled($previewMode ?? false)>
                                <i class="fa-solid fa-cart-arrow-down"></i> 
                                <span>
                                    @if($previewMode ?? false)
                                        Preview Mode
                                    @else
                                        {{ data_get($content, 'button_text', 'অর্ডারটি প্লেস করুন') }}
                                    @endif
                                </span>
                                <strong id="buttonTotal">{{ number_format($initialPrice, 0) }}৳</strong>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </section>

    {{-- ================================================================
        FOOTER
    ================================================================= --}}
    @elseif($section->type === 'footer')
        <footer class="footer">
            <div class="footer-heading">
                {{ data_get($content, 'heading', 'কোনো কিছু জানতে কিংবা সরাসরি অর্ডার করতে যোগাযোগ করুন') }}
            </div>
            <div class="footer-links">
                @if(filled(data_get($landingPage->settings, 'facebook_url')))
                    <a href="{{ data_get($landingPage->settings, 'facebook_url') }}" target="_blank" rel="noopener">
                        <i class="fa-brands fa-facebook-f"></i>
                    </a>
                @endif
                @if(filled($whatsapp))
                    <a href="https://wa.me/{{ $whatsapp }}" target="_blank" rel="noopener">
                        <i class="fa-brands fa-whatsapp"></i>
                    </a>
                @endif
                @if(filled($phone))
                    <a href="tel:+{{ $phone }}">
                        <i class="fa-solid fa-phone"></i>
                    </a>
                @endif
            </div>
            <div class="footer-copy">
                {{ data_get($content, 'copyright', '© 2026 All Right Reserved') }}
                @if(filled(data_get($content, 'address')))
                    <br>
                    {{ data_get($content, 'address') }}
                @endif
            </div>
        </footer>
    @endif
@endforeach

</div>

{{-- MOBILE FIXED ORDER BUTTON --}}
@if(!($previewMode ?? false) && optional($orderSection)->is_enabled)
    <a href="#order" class="mobile-order-button">
        <i class="fa-solid fa-cart-shopping"></i>
        এখনই অর্ডার করুন
    </a>
@endif

{{-- WHATSAPP LIVE CHAT ICON (Always Animated) --}}
@if(filled($whatsapp))
    <a href="https://wa.me/{{ $whatsapp }}" target="_blank" class="wa-live-chat" rel="noopener">
        <i class="fa-brands fa-whatsapp"></i>
    </a>
@endif

{{-- IMAGE MODAL --}}
<div class="image-modal" id="imageModal" hidden>
    <div class="modal-toolbar">
        <span class="modal-counter" id="modalCounter">1 / 1</span>
        <button type="button" class="modal-close" id="modalClose">×</button>
    </div>
    <div class="modal-stage" id="modalStage">
        <img src="" alt="Preview" class="modal-image" id="modalImage" draggable="false">
    </div>
</div>

{{-- TOAST --}}
<div class="lp-toast" id="lpToast" hidden></div>

{{-- JS DATA --}}
<script>
window.LANDING_PAGE_DATA = {{ \Illuminate\Support\Js::from($landingJs) }};
</script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- AOS JavaScript -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<script>
(function () {
    "use strict";
    
    // Initialize AOS
    if (typeof AOS !== 'undefined') {
        AOS.init({
            duration: 800,
            once: true,
            offset: 100
        });
    }

    var config = window.LANDING_PAGE_DATA || {};
    function byId(id) { return document.getElementById(id); }
    function safeArray(value) { return Array.isArray(value) ? value : []; }
    function money(value) {
        return new Intl.NumberFormat("en-BD", { maximumFractionDigits: 0 }).format(Number(value || 0)) + "৳";
    }

    // Scroll to order
    document.querySelectorAll(".js-scroll-order").forEach(function (button) {
        button.addEventListener("click", function () {
            var order = byId("order");
            if (order) {
                order.scrollIntoView({ behavior: "smooth", block: "start" });
            }
        });
    });

    // Hero Swiper
    var heroImages = safeArray(config.heroImages);
    var heroSwiper = null;
    if (byId("heroSwiper") && typeof Swiper !== "undefined") {
        heroSwiper = new Swiper("#heroSwiper", {
            slidesPerView: 1, spaceBetween: 0, speed: 650,
            loop: heroImages.length > 1,
            allowTouchMove: heroImages.length > 1,
            autoplay: heroImages.length > 1 ? { delay: 3500, disableOnInteraction: false, pauseOnMouseEnter: true } : false
        });
    }

    // Review Swiper
    var reviewImages = safeArray(config.reviewImages);
    var reviewSwiper = null;
    if (byId("reviewSwiper") && typeof Swiper !== "undefined") {
        reviewSwiper = new Swiper("#reviewSwiper", {
            slidesPerView: 1, spaceBetween: 12, speed: 650,
            loop: reviewImages.length > 3,
            autoplay: reviewImages.length > 1 ? { delay: 3700, disableOnInteraction: false, pauseOnMouseEnter: true } : false,
            breakpoints: { 768: { slidesPerView: 3, spaceBetween: 12 } }
        });
    }

    // Image popup logic (unchanged)
    var modal = byId("imageModal");
    var modalImage = byId("modalImage");
    var modalCounter = byId("modalCounter");
    var modalStage = byId("modalStage");
    var modalClose = byId("modalClose");
    var activeImages = [];
    var activeIndex = 0;
    var scale = 1;
    var modalTimer = null;
    var touchStartX = null;

    function resetZoom() {
        scale = 1;
        if (modalImage) modalImage.style.transform = "scale(1)";
        if (modalStage) { modalStage.scrollTop = 0; modalStage.scrollLeft = 0; }
    }
    function normalizeIndex(index) {
        if (activeImages.length === 0) return 0;
        if (index < 0) return activeImages.length - 1;
        if (index >= activeImages.length) return 0;
        return index;
    }
    function renderModal() {
        if (!modalImage || activeImages.length === 0) return;
        activeIndex = normalizeIndex(activeIndex);
        var item = activeImages[activeIndex];
        modalImage.src = typeof item === "string" ? item : item.url;
        modalCounter.textContent = (activeIndex + 1) + " / " + activeImages.length;
        resetZoom();
    }
    function stopModalAutoplay() {
        if (modalTimer) { clearInterval(modalTimer); modalTimer = null; }
    }
    function startModalAutoplay() {
        stopModalAutoplay();
        if (activeImages.length <= 1) return;
        modalTimer = setInterval(function () {
            if (scale > 1) return;
            activeIndex++;
            renderModal();
        }, 4000);
    }
    function openImageModal(group, index) {
        activeImages = group === "reviews" ? reviewImages : heroImages;
        if (activeImages.length === 0) return;
        activeIndex = Number(index || 0);
        renderModal();
        modal.hidden = false;
        document.body.classList.add("modal-open");
        if (heroSwiper && heroSwiper.autoplay) heroSwiper.autoplay.stop();
        if (reviewSwiper && reviewSwiper.autoplay) reviewSwiper.autoplay.stop();
        startModalAutoplay();
    }
    function closeImageModal() {
        modal.hidden = true;
        document.body.classList.remove("modal-open");
        stopModalAutoplay();
        resetZoom();
        if (heroSwiper && heroSwiper.autoplay) heroSwiper.autoplay.start();
        if (reviewSwiper && reviewSwiper.autoplay) reviewSwiper.autoplay.start();
    }
    document.addEventListener("click", function (event) {
        var button = event.target.closest(".js-open-image");
        if (!button) return;
        openImageModal(button.getAttribute("data-image-group"), button.getAttribute("data-image-index"));
    });
    if (modalClose) modalClose.addEventListener("click", closeImageModal);
    if (modalStage) {
        modalStage.addEventListener("wheel", function (event) {
            if (!modal || modal.hidden) return;
            event.preventDefault();
            if (event.deltaY < 0) scale = Math.min(4, scale + .2);
            else scale = Math.max(.7, scale - .2);
            modalImage.style.transform = "scale(" + scale + ")";
        }, { passive: false });
        modalStage.addEventListener("touchstart", function (event) {
            if (event.touches && event.touches.length === 1) touchStartX = event.touches[0].clientX;
        }, { passive: true });
        modalStage.addEventListener("touchend", function (event) {
            if (touchStartX === null || !event.changedTouches || !event.changedTouches[0]) return;
            var distance = event.changedTouches[0].clientX - touchStartX;
            touchStartX = null;
            if (Math.abs(distance) < 45 || scale > 1) return;
            if (distance > 0) activeIndex--; else activeIndex++;
            renderModal();
        }, { passive: true });
    }
    document.addEventListener("keydown", function (event) {
        if (!modal || modal.hidden) return;
        if (event.key === "Escape") { closeImageModal(); return; }
        if (event.key === "ArrowRight") { activeIndex++; renderModal(); }
        if (event.key === "ArrowLeft") { activeIndex--; renderModal(); }
    });

    // Checkout Logic
    var form = byId("landingOrderForm");
    if (!form) return;
    var variantInput = byId("selectedVariantId");
    var quantityInput = byId("selectedQuantity");
    var checkoutToken = byId("checkoutToken");
    var customerPhone = byId("customerPhone");
    var placeOrderButton = byId("placeOrderButton");
    var summaryImage = byId("summaryImage");
    var summaryName = byId("summaryName");
    var summaryQuantity = byId("summaryQuantity");
    var summaryProductPrice = byId("summaryProductPrice");
    var summarySubtotal = byId("summarySubtotal");
    var summaryDelivery = byId("summaryDelivery");
    var summaryTotal = byId("summaryTotal");
    var buttonTotal = byId("buttonTotal");
    var toast = byId("lpToast");
    var selectedRow = document.querySelector(".product-option.is-selected") || document.querySelector(".product-option");
    var currentQuantity = 1;
    var currentMax = Number(config.maxQuantity || 100);
    var autosaveTimer = null;
    var quoteController = null;
    var incompleteController = null;
    var orderFinished = false;
    var toastTimer = null;

    function showToast(message, type) {
        if (!toast) return;
        toast.textContent = String(message || "");
        toast.classList.toggle("is-error", type === "error");
        toast.hidden = false;
        clearTimeout(toastTimer);
        toastTimer = setTimeout(function () { toast.hidden = true; }, 3500);
    }
    function clearErrors() {
        document.querySelectorAll("[data-error-field]").forEach(function (element) { element.textContent = ""; });
    }
    function showErrors(errors) {
        clearErrors();
        if (!errors) return;
        Object.keys(errors).forEach(function (field) {
            var element = document.querySelector('[data-error-field="' + field + '"]');
            if (!element) return;
            var message = errors[field];
            element.textContent = Array.isArray(message) ? (message[0] || "") : String(message || "");
        });
    }
    function tokenKey() { return "landing-order:" + config.pageId; }
    function createToken() {
        if (window.crypto && typeof window.crypto.randomUUID === "function") return window.crypto.randomUUID();
        return Date.now().toString(36) + "-" + Math.random().toString(36).slice(2);
    }
    function ensureToken() {
        var token = "";
        try { token = localStorage.getItem(tokenKey()) || ""; } catch (error) { token = ""; }
        if (!token) {
            token = createToken();
            try { localStorage.setItem(tokenKey(), token); } catch (error) {}
        }
        checkoutToken.value = token;
        return token;
    }
    function postJSON(url, data, signal) {
        return fetch(url, {
            method: "POST",
            credentials: "same-origin",
            headers: { "Accept": "application/json", "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest", "X-CSRF-TOKEN": config.csrf || "" },
            body: JSON.stringify(data),
            signal: signal || undefined
        }).then(function (response) {
            return response.text().then(function (text) {
                var body = {};
                if (text) {
                    try { body = JSON.parse(text); } catch (error) { body = { message: text }; }
                }
                if (!response.ok) {
                    var requestError = new Error(body.message || "Request failed.");
                    requestError.status = response.status;
                    requestError.data = body;
                    throw requestError;
                }
                return body;
            });
        });
    }
    function payload() {
        var formData = new FormData(form);
        var data = {};
        formData.forEach(function (value, key) { data[key] = value; });
        data.token = ensureToken();
        data.quantity = Math.max(1, Number(data.quantity || 1));
        data.variant_id = data.variant_id ? data.variant_id : null;
        return data;
    }
    function selectOption(row) {
        if (!row) return;
        document.querySelectorAll(".product-option").forEach(function (option) { option.classList.remove("is-selected"); });
        row.classList.add("is-selected");
        selectedRow = row;
        currentMax = Math.max(1, Number(row.getAttribute("data-max") || 100));
        var qtyElement = row.querySelector(".js-option-qty");
        currentQuantity = Math.max(1, Math.min(currentMax, Number(qtyElement.textContent || 1)));
        variantInput.value = row.getAttribute("data-variant-id") || "";
        quantityInput.value = currentQuantity;
        updateLocalSummary();
        refreshQuote();
        scheduleIncomplete();
    }
    function updateLocalSummary() {
        if (!selectedRow) return;
        var price = Number(selectedRow.getAttribute("data-price") || 0);
        var name = selectedRow.getAttribute("data-name") || config.productName;
        var image = selectedRow.getAttribute("data-image") || "";
        var subtotal = price * currentQuantity;
        summaryImage.src = image;
        summaryName.textContent = name;
        summaryQuantity.textContent = "× " + currentQuantity;
        summaryProductPrice.textContent = money(subtotal);
        summarySubtotal.textContent = money(subtotal);
    }
    document.querySelectorAll(".product-option").forEach(function (row) {
        row.addEventListener("click", function (event) {
            if (event.target.closest(".js-option-minus") || event.target.closest(".js-option-plus")) return;
            selectOption(row);
        });
        var qty = row.querySelector(".js-option-qty");
        row.querySelector(".js-option-minus").addEventListener("click", function (event) {
            event.stopPropagation();
            selectOption(row);
            currentQuantity = Math.max(1, currentQuantity - 1);
            qty.textContent = currentQuantity;
            quantityInput.value = currentQuantity;
            updateLocalSummary(); refreshQuote(); scheduleIncomplete();
        });
        row.querySelector(".js-option-plus").addEventListener("click", function (event) {
            event.stopPropagation();
            selectOption(row);
            currentQuantity = Math.min(currentMax, currentQuantity + 1);
            qty.textContent = currentQuantity;
            quantityInput.value = currentQuantity;
            updateLocalSummary(); refreshQuote(); scheduleIncomplete();
        });
    });
    function updateDeliveryUI() {
        document.querySelectorAll(".delivery-card").forEach(function (card) {
            var radio = card.querySelector('input[type="radio"]');
            card.classList.toggle("is-selected", Boolean(radio && radio.checked));
        });
    }
    document.querySelectorAll('input[name="delivery_area"]').forEach(function (radio) {
        radio.addEventListener("change", function () {
            updateDeliveryUI(); refreshQuote(); scheduleIncomplete();
        });
    });
    function applyQuote(quote) {
        if (! quote) return;

        if (quote.max_quantity !== undefined) {
            currentMax = Math.max(1, Number(quote.max_quantity || 1));
        }

        if (quote.quantity !== undefined) {
            currentQuantity = Math.max(
                1,
                Math.min(currentMax, Number(quote.quantity || 1))
            );

            quantityInput.value = currentQuantity;

            if (selectedRow) {
                var selectedQty = selectedRow.querySelector(".js-option-qty");
                if (selectedQty) selectedQty.textContent = currentQuantity;
            }
        }

        summaryQuantity.textContent = "× " + currentQuantity;
        summaryProductPrice.textContent = money(quote.subtotal);
        summarySubtotal.textContent = money(quote.subtotal);

        if (quote.delivery_area) {
            summaryDelivery.textContent = quote.shipping_free
                ? "ফ্রি"
                : money(quote.delivery_charge);
        } else {
            summaryDelivery.textContent = "এলাকা নির্বাচন করুন";
        }

        summaryTotal.textContent = money(quote.total);
        buttonTotal.textContent = money(quote.total);

        /*
         * Every admin-created delivery area receives its current price.
         * Quantity/variant/weight change হলে সব area charge refresh হবে।
         */
        if (Array.isArray(quote.delivery_areas)) {
            quote.delivery_areas.forEach(function (area) {
                var element = document.querySelector(
                    '[data-delivery-price="'
                    + CSS.escape(String(area.key))
                    + '"]'
                );

                if (! element) return;

                element.textContent = quote.shipping_free
                    ? "ফ্রি"
                    : money(area.charge);
            });
        }

        if (quote.delivery_area !== undefined && quote.delivery_area !== null) {
            var matchingRadio = document.querySelector(
                'input[name="delivery_area"][value="'
                + CSS.escape(String(quote.delivery_area))
                + '"]'
            );

            if (matchingRadio && ! document.querySelector('input[name="delivery_area"]:checked')) {
                matchingRadio.checked = true;
                updateDeliveryUI();
            }
        }
    }
    function refreshQuote() {
        if (config.preview) return;
        if (quoteController && quoteController.abort) quoteController.abort();
        quoteController = typeof AbortController !== "undefined" ? new AbortController() : null;
        postJSON(config.quoteUrl, payload(), quoteController ? quoteController.signal : undefined)
            .then(function (response) { applyQuote(response.quote); })
            .catch(function (error) {
                if (error.name === "AbortError") return;
                console.warn("Quote:", error);
            });
    }
    function saveIncomplete() {
        if (config.preview || orderFinished) return;
        if (incompleteController && incompleteController.abort) incompleteController.abort();
        incompleteController = typeof AbortController !== "undefined" ? new AbortController() : null;
        postJSON(config.incompleteUrl, payload(), incompleteController ? incompleteController.signal : undefined)
            .then(function (response) {
                if (response && response.draft && response.draft.token) {
                    checkoutToken.value = response.draft.token;
                    try { localStorage.setItem(tokenKey(), response.draft.token); } catch (error) {}
                }
            })
            .catch(function (error) {
                if (error.name === "AbortError") return;
                console.warn("Incomplete order:", error);
            });
    }
    function scheduleIncomplete(delay) {
        if (config.preview || orderFinished) return;
        clearTimeout(autosaveTimer);
        autosaveTimer = setTimeout(saveIncomplete, delay === undefined ? 650 : delay);
    }
    if (customerPhone) {
        customerPhone.addEventListener("input", function () {
            customerPhone.value = customerPhone.value.replace(/\D/g, "").slice(0, 11);
            scheduleIncomplete();
        });
    }
    form.addEventListener("input", function (event) {
        if (event.target === customerPhone) return;
        scheduleIncomplete();
    });
    form.addEventListener("submit", function (event) {
        event.preventDefault();
        if (config.preview) return;
        clearErrors();
        var selectedDelivery = form.querySelector('input[name="delivery_area"]:checked');
        if (!selectedDelivery) {
            showErrors({ delivery_area: ["ডেলিভারি এলাকা নির্বাচন করুন।"] });
            showToast("ডেলিভারি এলাকা নির্বাচন করুন।", "error");
            return;
        }
        clearTimeout(autosaveTimer);
        if (incompleteController && incompleteController.abort) incompleteController.abort();
        placeOrderButton.disabled = true;
        postJSON(config.orderUrl, payload())
            .then(function (response) {
                orderFinished = true;
                try { localStorage.removeItem(tokenKey()); } catch (error) {}
                if (response.redirect_url) {
                    window.location.href = response.redirect_url;
                    return;
                }
                showToast(response.message || config.successText || "অর্ডার সফলভাবে গ্রহণ করা হয়েছে।");
            })
            .catch(function (error) {
                if (error.status === 422) {
                    var errors = error.data && error.data.errors ? error.data.errors : {};
                    showErrors(errors);
                    var firstMessage = "তথ্যগুলো সঠিকভাবে পূরণ করুন।";
                    Object.keys(errors).some(function (key) {
                        var value = errors[key];
                        firstMessage = Array.isArray(value) ? value[0] : value;
                        return Boolean(firstMessage);
                    });
                    showToast(firstMessage, "error");
                    return;
                }
                showToast(error.message || "অর্ডার সম্পন্ন করা যায়নি।", "error");
            })
            .finally(function () { placeOrderButton.disabled = false; });
    });
    
    // Init
    ensureToken();
    updateDeliveryUI();
    if (selectedRow) selectOption(selectedRow);
    refreshQuote();
    scheduleIncomplete(500);

})();
</script>
</body>
</html>