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

    $theme = array_merge(
        [
            'primary' => '#112d5c',
            'primary_dark' => '#081c3d',
            'accent' => '#d9b66b',
            'accent_dark' => '#b28a3e',
            'accent_light' => '#f0d89e',
            'secondary' => '#668c21',
            'secondary_dark' => '#4e7017',
            'background' => '#fffdf8',
            'surface' => '#ffffff',
            'text' => '#282828',
            'muted' => '#6c6c6c',
        ],
        (array) ($landingPage->theme ?? [])
    );

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

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

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

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

    /*
    |--------------------------------------------------------------------------
    | Images
    |--------------------------------------------------------------------------
    */

    $resolveImage = function ($image) {
        if (! $image) {
            return null;
        }

        $url =
            data_get($image, 'url')
            ?: data_get($image, 'image_url');

        if (filled($url)) {
            return $url;
        }

        $path = data_get(
            $image,
            'image_path'
        );

        if (blank($path)) {
            return null;
        }

        return \App\Models\Product::resolveMediaUrl(
            $path
        );
    };

    $productImages = $product
        ->images
        ->map($resolveImage)
        ->filter()
        ->values();

    $mainImage =
        $product->image_url
        ?: $productImages->get(0)
        ?: asset(
            'images/product-placeholder.png'
        );

    $image2 = $productImages->get(
        1,
        $mainImage
    );

    $image3 = $productImages->get(
        2,
        $image2
    );

    $promoImage = $productImages->get(
        3,
        $image3
    );

    /*
    |--------------------------------------------------------------------------
    | Variants
    |--------------------------------------------------------------------------
    */

    $variants =
        $product->activeVariants;

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

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

        $regularPrice = (float) (
            $defaultVariant->regular_price
            ?? $basePrice
        );
    } else {
        $basePrice =
            (float) $product->final_price;

        $regularPrice =
            (float) $product->regular_price;
    }

    /*
    |--------------------------------------------------------------------------
    | 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
                )
            );
        }
    }

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

    $enabledSections = $sections
        ->filter(
            fn ($section) =>
                $section->is_enabled
        )
        ->sortBy('sort_order')
        ->values();

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

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

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

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

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

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

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

    $heroContent =
        (array) optional(
            $heroSection
        )->content;

    $benefitsContent =
        (array) optional(
            $benefitsSection
        )->content;

    $promoContent =
        (array) optional(
            $promoSection
        )->content;

    $usageContent =
        (array) optional(
            $usageSection
        )->content;

    $reviewsContent =
        (array) optional(
            $reviewsSection
        )->content;

    $orderContent =
        (array) optional(
            $orderSection
        )->content;

    $footerContent =
        (array) optional(
            $footerSection
        )->content;

    /*
    |--------------------------------------------------------------------------
    | Custom Hero Images
    |--------------------------------------------------------------------------
    */

    $heroMainImage =
        data_get(
            $heroContent,
            'main_image_url'
        )
        ?: $mainImage;

    $heroSideImage1 =
        data_get(
            $heroContent,
            'side_image_1_url'
        )
        ?: $image2;

    $heroSideImage2 =
        data_get(
            $heroContent,
            'side_image_2_url'
        )
        ?: $image3;

    /*
    |--------------------------------------------------------------------------
    | Benefit Items
    |--------------------------------------------------------------------------
    */

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

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

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

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

    if ($usageFeatures->isEmpty()) {
        $usageFeatures = collect([
            '১০০% অরিজিনাল',
            'দ্রুত ডেলিভারি',
            'ক্যাশ অন ডেলিভারি',
        ]);
    }

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

    $reviews = collect(
        data_get(
            $reviewsContent,
            'items',
            []
        )
    )
        ->filter(
            fn ($review) =>
                filled(
                    data_get(
                        $review,
                        'text'
                    )
                )
        )
        ->values();

    /*
    |--------------------------------------------------------------------------
    | Footer Contact
    |--------------------------------------------------------------------------
    */

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

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

    /*
    |--------------------------------------------------------------------------
    | Default Delivery Area
    |--------------------------------------------------------------------------
    */

    $defaultDeliveryArea =
        $deliveryAreas->first();

    /*
    |--------------------------------------------------------------------------
    | JS Configuration
    |--------------------------------------------------------------------------
    */

    $landingPageJsData = [
        'preview' =>
            (bool) $previewMode,

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

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

        'productName' =>
            (string) $product->name,

        'productImage' =>
            (string) $mainImage,

        'basePrice' =>
            (float) $basePrice,

        'maxQuantity' =>
            (int) $maxQuantity,

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

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

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

        'csrf' =>
            csrf_token(),

        'successTitle' =>
            data_get(
                $orderContent,
                'success_title',
                'অর্ডার গ্রহণ করা হয়েছে'
            ),

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

        'variants' =>
            $variants
                ->map(
                    function ($variant) use ($product) {
                        $price = (float) (
                            $variant->sale_price
                            ?? $variant->regular_price
                            ?? 0
                        );

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

                        return [
                            'id' =>
                                (int) $variant->id,

                            'name' =>
                                (string) $variant->name,

                            'price' =>
                                $price,

                            'regular_price' =>
                                (float) $variant->regular_price,

                            'max_quantity' =>
                                $maximum,
                        ];
                    }
                )
                ->values()
                ->all(),
    ];
@endphp

<!doctype html>

<html lang="bn">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <meta
        name="csrf-token"
        content="{{ csrf_token() }}"
    >

    <title>{{ $metaTitle }}</title>

    <meta
        name="description"
        content="{{ $metaDescription }}"
    >

    @if(
        filled(
            data_get(
                $seo,
                'meta_keywords'
            )
        )
    )
        <meta
            name="keywords"
            content="{{ data_get(
                $seo,
                'meta_keywords'
            ) }}"
        >
    @endif

    @if(! $previewMode)
        <link
            rel="canonical"
            href="{{ $landingPage->public_url }}"
        >
    @endif

    {{-- Google Fonts --}}

    <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=Cinzel:wght@500;600;700&family=Hind+Siliguri:wght@400;500;600;700&display=swap"
        rel="stylesheet"
    >

    {{-- Font Awesome --}}

    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
    >

    {{-- AOS --}}

    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
    >

    {{-- Swiper --}}

    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    >

    <style>

        :root {

            --navy:
                {{ $theme['primary'] ?? '#112d5c' }};

            --navy-dark:
                {{ $theme['primary_dark'] ?? '#081c3d' }};

            --navy-light:
                color-mix(
                    in srgb,
                    var(--navy)
                    78%,
                    white
                );

            --gold:
                {{ $theme['accent'] ?? '#d9b66b' }};

            --gold-dark:
                {{ $theme['accent_dark'] ?? '#b28a3e' }};

            --gold-light:
                {{ $theme['accent_light'] ?? '#f0d89e' }};

            --cream:
                #f8f1e3;

            --cream-light:
                {{ $theme['background'] ?? '#fffdf8' }};

            --soft-green:
                #ecf5d5;

            --green:
                {{ $theme['secondary'] ?? '#668c21' }};

            --green-dark:
                {{ $theme['secondary_dark'] ?? '#4e7017' }};

            --white:
                {{ $theme['surface'] ?? '#ffffff' }};

            --black:
                #151515;

            --text:
                {{ $theme['text'] ?? '#282828' }};

            --muted:
                {{ $theme['muted'] ?? '#6c6c6c' }};

            --border:
                #ded3bb;

            --shadow:
                0 20px 50px
                rgba(
                    17,
                    45,
                    92,
                    0.13
                );

            --radius:
                20px;
        }

        * {
            box-sizing:
                border-box;

            margin:
                0;

            padding:
                0;
        }

        html {
            scroll-behavior:
                smooth;
        }

        body {
            font-family:
                "Hind Siliguri",
                sans-serif;

            color:
                var(--text);

            background:
                var(--white);

            overflow-x:
                hidden;
        }

        body.modal-open {
            overflow:
                hidden;
        }

        img {
            display:
                block;

            max-width:
                100%;
        }

        a {
            color:
                inherit;

            text-decoration:
                none;
        }

        button,
        input,
        textarea,
        select {
            font-family:
                inherit;
        }

        button {
            cursor:
                pointer;
        }

        button:disabled {
            cursor:
                not-allowed;

            opacity:
                .65;
        }

        .container {
            width:
                min(
                    1120px,
                    calc(
                        100% - 32px
                    )
                );

            margin-inline:
                auto;
        }

        .section {
            padding:
                82px 0;
        }

        .pattern-bg {
            background-color:
                #fff;

            background-image:
                radial-gradient(
                    rgba(
                        17,
                        45,
                        92,
                        0.08
                    )
                    1px,
                    transparent
                    1px
                );

            background-size:
                11px 11px;
        }

        .section-title {
            color:
                var(--navy);

            text-align:
                center;

            font-size:
                clamp(
                    36px,
                    5vw,
                    60px
                );

            font-weight:
                700;

            line-height:
                1.06;
        }

        .section-subtitle {
            margin-top:
                5px;

            color:
                #101a36;

            text-align:
                center;

            font-size:
                clamp(
                    24px,
                    3.5vw,
                    39px
                );

            font-weight:
                700;

            line-height:
                1.15;
        }

        .gold-button,
        .navy-button,
        .green-button {

            border:
                none;

            border-radius:
                7px;

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                9px;

            padding:
                12px 25px;

            font-size:
                20px;

            font-weight:
                700;

            transition:
                .3s ease;
        }

        .gold-button {

            color:
                #181818;

            background:
                linear-gradient(
                    135deg,
                    var(--gold-light),
                    var(--gold-dark)
                );

            box-shadow:
                0 10px 25px
                rgba(
                    215,
                    168,
                    38,
                    .22
                );
        }

        .navy-button {

            color:
                var(--white);

            background:
                linear-gradient(
                    135deg,
                    var(--navy),
                    var(--navy-light)
                );

            box-shadow:
                0 10px 25px
                rgba(
                    17,
                    45,
                    92,
                    .22
                );
        }

        .green-button {

            color:
                var(--white);

            background:
                linear-gradient(
                    135deg,
                    var(--green),
                    var(--green-dark)
                );
        }

        .gold-button:hover,
        .navy-button:hover,
        .green-button:hover {
            transform:
                translateY(
                    -3px
                );
        }

        /*
        |--------------------------------------------------------------------------
        | Preview Bar
        |--------------------------------------------------------------------------
        */

        .preview-bar {

            position:
                sticky;

            top:
                0;

            z-index:
                9999;

            min-height:
                48px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                15px;

            padding:
                8px 16px;

            color:
                #fff;

            background:
                #111827;

            font-size:
                14px;
        }

        .preview-bar strong {
            color:
                #facc15;
        }

        /*
        |--------------------------------------------------------------------------
        | HERO
        |--------------------------------------------------------------------------
        */

        .hero {

            min-height:
                100vh;

            position:
                relative;

            overflow:
                hidden;

            padding-top:
                20px;

            background:
                radial-gradient(
                    circle at 50% 36%,
                    rgba(
                        255,
                        255,
                        255,
                        .94
                    ),
                    transparent
                    42%
                ),
                linear-gradient(
                    180deg,
                    var(--cream-light)
                    0%,
                    #eef8d4
                    100%
                );
        }

        .hero::before {

            content:
                "";

            position:
                absolute;

            top:
                15%;

            left:
                -200px;

            width:
                430px;

            height:
                430px;

            border-radius:
                50%;

            background:
                color-mix(
                    in srgb,
                    var(--gold)
                    20%,
                    transparent
                );

            filter:
                blur(
                    80px
                );
        }

        .hero::after {

            content:
                "";

            position:
                absolute;

            top:
                24%;

            right:
                -180px;

            width:
                400px;

            height:
                400px;

            border-radius:
                50%;

            background:
                color-mix(
                    in srgb,
                    var(--green)
                    15%,
                    transparent
                );

            filter:
                blur(
                    80px
                );
        }

        .hero-inner {

            position:
                relative;

            z-index:
                3;

            text-align:
                center;
        }

        .site-logo {

            display:
                inline-flex;

            flex-direction:
                column;

            align-items:
                center;

            margin-bottom:
                10px;

            color:
                var(--navy);
        }

        .site-logo-name {

            font-family:
                "Cinzel",
                serif;

            font-size:
                30px;

            font-weight:
                700;

            letter-spacing:
                3px;
        }

        .site-logo-line {

            width:
                90px;

            height:
                2px;

            margin-top:
                3px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--gold-dark),
                    transparent
                );
        }

        .hero-title {

            margin:
                3px auto
                19px;

            line-height:
                1.02;
        }

        .hero-title span {

            display:
                block;

            width:
                fit-content;

            margin-inline:
                auto;

            padding:
                0 10px;

            font-size:
                clamp(
                    38px,
                    5.7vw,
                    69px
                );

            font-weight:
                700;

            -webkit-text-stroke:
                7px
                #0b0b0b;

            paint-order:
                stroke fill;

            text-shadow:
                0 7px 0
                #080808;
        }

        .hero-title .line-one {
            color:
                var(--gold);
        }

        .hero-title .line-two {
            color:
                #ee8967;
        }

        .hero-title .line-three {

            color:
                var(--green);

            font-size:
                clamp(
                    31px,
                    5vw,
                    60px
                );
        }

        .stars {

            margin-bottom:
                15px;

            color:
                #e8b853;

            font-size:
                19px;

            letter-spacing:
                4px;
        }

        .hero-promise {

            position:
                relative;

            width:
                min(
                    580px,
                    100%
                );

            margin-inline:
                auto;

            padding:
                14px 18px
                39px;

            border:
                1px solid
                #efd4a7;

            border-radius:
                8px;

            background:
                rgba(
                    255,
                    248,
                    232,
                    .95
                );

            font-size:
                20px;

            line-height:
                1.35;
        }

        .hero-promise strong {

            display:
                block;

            font-weight:
                700;
        }

        .refund-badge {

            position:
                absolute;

            left:
                50%;

            bottom:
                -17px;

            width:
                calc(
                    100% - 72px
                );

            transform:
                translateX(
                    -50%
                );

            padding:
                8px 10px;

            border:
                6px solid
                #fff7e7;

            border-radius:
                7px;

            color:
                var(--white);

            background:
                linear-gradient(
                    180deg,
                    var(--green),
                    var(--green-dark)
                );

            font-size:
                20px;

            font-weight:
                700;
        }

        .customer-heading {

            margin-top:
                36px;

            color:
                var(--green);

            font-size:
                40px;

            font-weight:
                700;

            line-height:
                1;
        }

        .customer-pill {

            width:
                fit-content;

            margin:
                12px auto
                4px;

            padding:
                7px 20px
                7px 11px;

            display:
                flex;

            align-items:
                center;

            gap:
                10px;

            border:
                1px solid
                #d6d6d6;

            border-radius:
                60px;

            background:
                var(--white);

            box-shadow:
                0 8px 25px
                rgba(
                    0,
                    0,
                    0,
                    .05
                );
        }

        .customer-avatars {

            display:
                flex;

            padding-left:
                8px;
        }

        .customer-avatars img {

            width:
                44px;

            height:
                44px;

            margin-left:
                -9px;

            object-fit:
                cover;

            border:
                3px solid
                var(--white);

            border-radius:
                50%;
        }

        .customer-number {

            width:
                48px;

            height:
                48px;

            display:
                grid;

            place-items:
                center;

            color:
                #111;

            background:
                #efc130;

            border-radius:
                50%;

            font-size:
                13px;

            font-weight:
                700;

            line-height:
                1;
        }

        .customer-text {

            color:
                #13234c;

            font-size:
                29px;

            font-weight:
                700;
        }

        .drawn-arrow {

            width:
                82px;

            height:
                70px;

            position:
                relative;

            margin:
                6px auto
                -7px;

            transform:
                rotate(
                    -10deg
                );
        }

        .drawn-arrow::before {

            content:
                "";

            position:
                absolute;

            left:
                16px;

            top:
                0;

            width:
                50px;

            height:
                52px;

            border-left:
                4px dashed
                #111;

            border-bottom:
                4px dashed
                #111;

            border-radius:
                0 0 0 45px;

            transform:
                rotate(
                    -25deg
                );
        }

        .drawn-arrow::after {

            content:
                "";

            position:
                absolute;

            right:
                7px;

            bottom:
                5px;

            width:
                17px;

            height:
                17px;

            border-right:
                4px solid
                #111;

            border-bottom:
                4px solid
                #111;

            transform:
                rotate(
                    20deg
                );
        }

        .hero-product-area {

            width:
                min(
                    760px,
                    100%
                );

            height:
                470px;

            position:
                relative;

            margin-inline:
                auto;
        }

        .hero-glow {

            position:
                absolute;

            left:
                50%;

            top:
                40%;

            width:
                440px;

            height:
                350px;

            transform:
                translate(
                    -50%,
                    -50%
                );

            border-radius:
                50%;

            background:
                radial-gradient(
                    circle,
                    rgba(
                        165,
                        202,
                        74,
                        .4
                    ),
                    transparent
                    70%
                );

            filter:
                blur(
                    12px
                );
        }

        .main-product-image {

            position:
                absolute;

            left:
                50%;

            top:
                25px;

            width:
                320px;

            height:
                400px;

            transform:
                translateX(
                    -50%
                );

            object-fit:
                cover;

            object-position:
                center;

            border-radius:
                22px;

            box-shadow:
                0 28px 45px
                rgba(
                    0,
                    0,
                    0,
                    .2
                );

            z-index:
                4;

            animation:
                productFloat
                4.5s
                ease-in-out
                infinite;
        }

        .ingredient-image {

            position:
                absolute;

            left:
                calc(
                    50% - 285px
                );

            bottom:
                35px;

            width:
                250px;

            height:
                190px;

            object-fit:
                cover;

            border-radius:
                50% 50%
                15px 15px;

            box-shadow:
                var(--shadow);

            transform:
                rotate(
                    -5deg
                );

            z-index:
                2;
        }

        .clay-image {

            position:
                absolute;

            right:
                calc(
                    50% - 300px
                );

            bottom:
                25px;

            width:
                250px;

            height:
                190px;

            object-fit:
                cover;

            border-radius:
                50% 50%
                15px 15px;

            box-shadow:
                var(--shadow);

            transform:
                rotate(
                    5deg
                );

            z-index:
                2;
        }

        .nature-base {

            position:
                absolute;

            left:
                50%;

            bottom:
                -30px;

            width:
                760px;

            max-width:
                100%;

            height:
                175px;

            transform:
                translateX(
                    -50%
                );

            border-radius:
                50% 50%
                0 0;

            background:
                radial-gradient(
                    circle at 20% 30%,
                    #90a948
                    0 8%,
                    transparent
                    9%
                ),
                radial-gradient(
                    circle at 38% 45%,
                    #557417
                    0 14%,
                    transparent
                    15%
                ),
                radial-gradient(
                    circle at 62% 25%,
                    #91ab42
                    0 13%,
                    transparent
                    14%
                ),
                radial-gradient(
                    circle at 80% 45%,
                    #476b11
                    0 13%,
                    transparent
                    14%
                ),
                linear-gradient(
                    180deg,
                    var(--green),
                    var(--green-dark)
                );

            z-index:
                1;
        }

        @keyframes productFloat {

            0%,
            100% {

                transform:
                    translateX(
                        -50%
                    )
                    translateY(
                        0
                    );
            }

            50% {

                transform:
                    translateX(
                        -50%
                    )
                    translateY(
                        -14px
                    );
            }
        }

        /*
        |--------------------------------------------------------------------------
        | BENEFITS
        |--------------------------------------------------------------------------
        */

        .benefit-section {
            padding-top:
                70px;
        }

        .benefit-diagram {

            min-height:
                730px;

            position:
                relative;

            max-width:
                1030px;

            margin:
                42px auto
                0;
        }

        .benefit-backdrop {

            position:
                absolute;

            left:
                11%;

            top:
                172px;

            width:
                78%;

            height:
                270px;

            border:
                1px solid
                #b2d066;

            border-radius:
                22px;

            background:
                linear-gradient(
                    180deg,
                    #eaf8c9,
                    rgba(
                        248,
                        252,
                        239,
                        .8
                    )
                );
        }

        .benefit-head {

            position:
                absolute;

            top:
                150px;

            z-index:
                5;

            color:
                #101010;

            font-size:
                35px;

            font-weight:
                700;

            line-height:
                1;

            text-shadow:
                -3px -3px
                var(--white),
                3px -3px
                var(--white),
                -3px 3px
                var(--white),
                3px 3px
                var(--white);
        }

        .benefit-head.left {
            left:
                13%;
        }

        .benefit-head.right {
            right:
                13%;
        }

        .benefit-product {

            position:
                absolute;

            left:
                50%;

            top:
                22px;

            width:
                230px;

            height:
                340px;

            transform:
                translateX(
                    -50%
                )
                rotate(
                    -8deg
                );

            object-fit:
                cover;

            border-radius:
                20px;

            filter:
                drop-shadow(
                    0 25px 20px
                    rgba(
                        0,
                        0,
                        0,
                        .24
                    )
                );

            z-index:
                6;
        }

        .natural-badge {

            position:
                absolute;

            left:
                calc(
                    50% + 52px
                );

            top:
                190px;

            width:
                118px;

            height:
                118px;

            display:
                grid;

            place-items:
                center;

            text-align:
                center;

            color:
                var(--white);

            background:
                var(--navy);

            border:
                4px dotted
                rgba(
                    255,
                    255,
                    255,
                    .9
                );

            outline:
                2px dotted
                rgba(
                    17,
                    45,
                    92,
                    .45
                );

            border-radius:
                50%;

            font-size:
                17px;

            font-weight:
                700;

            line-height:
                1;

            z-index:
                7;
        }

        .natural-badge strong {

            display:
                block;

            font-size:
                29px;
        }

        .diagram-line {

            position:
                absolute;

            left:
                50%;

            top:
                340px;

            width:
                4px;

            height:
                330px;

            transform:
                translateX(
                    -50%
                );

            background:
                #111;

            z-index:
                2;
        }

        .benefit-item {

            position:
                absolute;

            width:
                335px;

            min-height:
                92px;

            padding:
                12px 18px;

            display:
                flex;

            align-items:
                center;

            border:
                1px solid
                #8299a2;

            border-radius:
                9px;

            background:
                rgba(
                    255,
                    255,
                    255,
                    .97
                );

            box-shadow:
                0 8px 20px
                rgba(
                    0,
                    0,
                    0,
                    .035
                );

            font-size:
                26px;

            font-weight:
                600;

            line-height:
                1.1;

            z-index:
                4;

            transition:
                .3s ease;
        }

        .benefit-item:hover {

            border-color:
                var(--navy);

            box-shadow:
                var(--shadow);

            transform:
                translateY(
                    -4px
                );
        }

        .benefit-item.left-item {

            right:
                calc(
                    50% + 31px
                );

            justify-content:
                flex-end;

            text-align:
                right;
        }

        .benefit-item.right-item {

            left:
                calc(
                    50% + 31px
                );

            text-align:
                left;
        }

        .benefit-item::before {

            content:
                "";

            position:
                absolute;

            top:
                50%;

            width:
                31px;

            height:
                4px;

            background:
                #111;
        }

        .benefit-item::after {

            content:
                "";

            position:
                absolute;

            top:
                calc(
                    50% - 5px
                );

            width:
                14px;

            height:
                14px;

            border-radius:
                50%;

            background:
                #111;
        }

        .benefit-item.left-item::before {
            right:
                -31px;
        }

        .benefit-item.left-item::after {
            right:
                -38px;
        }

        .benefit-item.right-item::before {
            left:
                -31px;
        }

        .benefit-item.right-item::after {
            left:
                -38px;
        }

        .benefit-one {
            top:
                395px;
        }

        .benefit-two {
            top:
                510px;
        }

        .benefit-three {
            top:
                625px;
        }

        .benefit-four {
            top:
                425px;
        }

        .benefit-five {
            top:
                545px;
        }

        .benefit-six {
            top:
                665px;
        }

        .benefit-buttons {

            margin-top:
                8px;

            text-align:
                center;
        }

        /*
        |--------------------------------------------------------------------------
        | PROMO
        |--------------------------------------------------------------------------
        */

        .promo-banner {
            padding:
                25px 0
                55px;
        }

        .promo-image-box {

            position:
                relative;

            overflow:
                hidden;

            border:
                5px solid
                var(--gold-light);

            border-radius:
                22px;

            box-shadow:
                var(--shadow);
        }

        .promo-image-box img {

            width:
                100%;

            height:
                420px;

            object-fit:
                cover;

            object-position:
                center;

            filter:
                brightness(
                    .68
                );
        }

        .promo-overlay {

            position:
                absolute;

            inset:
                0;

            display:
                flex;

            align-items:
                center;

            padding:
                40px 55px;

            color:
                var(--white);

            background:
                linear-gradient(
                    90deg,
                    rgba(
                        5,
                        22,
                        53,
                        .82
                    ),
                    rgba(
                        5,
                        22,
                        53,
                        .15
                    )
                );
        }

        .promo-content {
            max-width:
                550px;
        }

        .promo-content small {

            display:
                inline-block;

            margin-bottom:
                10px;

            padding:
                6px 14px;

            color:
                var(--navy-dark);

            background:
                var(--gold);

            border-radius:
                20px;

            font-weight:
                700;
        }

        .promo-content h2 {

            margin-bottom:
                13px;

            font-size:
                clamp(
                    35px,
                    5vw,
                    59px
                );

            line-height:
                1.05;
        }

        .promo-content p {

            margin-bottom:
                20px;

            font-size:
                20px;

            line-height:
                1.5;
        }

        /*
        |--------------------------------------------------------------------------
        | USAGE
        |--------------------------------------------------------------------------
        */

        .usage-section {
            padding-top:
                40px;
        }

        .usage-title {

            color:
                #363636;

            text-align:
                center;

            font-size:
                clamp(
                    41px,
                    5vw,
                    61px
                );

            font-weight:
                700;
        }

        .usage-box {

            position:
                relative;

            max-width:
                1000px;

            margin:
                54px auto
                0;

            padding:
                75px 40px
                38px;

            text-align:
                center;

            border:
                1px solid
                #b0cf68;

            border-radius:
                22px;

            background:
                linear-gradient(
                    180deg,
                    #e8f8c4,
                    #f9fdf1
                );
        }

        .usage-icon {

            position:
                absolute;

            left:
                50%;

            top:
                -47px;

            width:
                94px;

            height:
                94px;

            transform:
                translateX(
                    -50%
                );

            display:
                grid;

            place-items:
                center;

            color:
                #f2bc22;

            background:
                #222;

            border-radius:
                50%;

            font-size:
                39px;
        }

        .usage-box p {

            font-size:
                clamp(
                    25px,
                    3.2vw,
                    38px
                );

            font-weight:
                600;

            line-height:
                1.28;
        }

        .usage-box p strong {

            display:
                block;

            color:
                var(--green);

            font-weight:
                700;
        }

        .drawn-line {

            width:
                330px;

            max-width:
                80%;

            height:
                16px;

            margin:
                9px auto
                27px;

            border-top:
                3px solid
                #111;

            border-radius:
                50%;

            transform:
                rotate(
                    -2deg
                );
        }

        .feature-grid {

            display:
                grid;

            grid-template-columns:
                repeat(
                    3,
                    1fr
                );

            gap:
                18px;
        }

        .feature-item {

            padding:
                13px 15px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                10px;

            color:
                var(--white);

            background:
                var(--green);

            border-radius:
                5px;

            font-size:
                21px;

            font-weight:
                600;
        }

        .feature-item i {

            width:
                25px;

            height:
                25px;

            display:
                grid;

            place-items:
                center;

            color:
                var(--green);

            background:
                var(--white);

            border-radius:
                50%;

            font-size:
                14px;
        }

        .usage-button {
            margin-top:
                19px;
        }

        /*
        |--------------------------------------------------------------------------
        | REVIEWS
        |--------------------------------------------------------------------------
        */

        .reviews-section {
            padding-top:
                60px;
        }

        .review-heading {

            color:
                #383838;

            text-align:
                center;

            font-size:
                clamp(
                    37px,
                    5vw,
                    58px
                );

            font-weight:
                700;
        }

        .review-heading span {
            color:
                var(--navy);
        }

        .review-description {

            margin-top:
                7px;

            margin-bottom:
                34px;

            color:
                var(--muted);

            text-align:
                center;

            font-size:
                19px;
        }

        .review-swiper {
            padding:
                12px 4px
                58px;
        }

        .review-card {

            height:
                100%;

            overflow:
                hidden;

            display:
                flex;

            flex-direction:
                column;

            border:
                1px solid
                #e3e3e3;

            border-radius:
                17px;

            background:
                var(--white);

            box-shadow:
                0 15px 35px
                rgba(
                    0,
                    0,
                    0,
                    .07
                );
        }

        .review-content {

            min-height:
                270px;

            padding:
                24px 22px
                18px;
        }

        .quote-mark {

            height:
                43px;

            color:
                #111;

            font-family:
                Georgia,
                serif;

            font-size:
                72px;

            line-height:
                .75;
        }

        .review-content p {

            font-size:
                19px;

            font-weight:
                500;

            line-height:
                1.45;
        }

        .review-content mark {

            padding:
                1px 5px;

            color:
                var(--white);

            background:
                var(--green);
        }

        .review-user {

            display:
                flex;

            align-items:
                center;

            gap:
                12px;

            margin-top:
                17px;
        }

        .review-user img {

            width:
                57px;

            height:
                57px;

            object-fit:
                cover;

            border-radius:
                50%;
        }

        .review-user strong {

            display:
                block;

            font-size:
                19px;
        }

        .review-user small {
            color:
                var(--muted);
        }

        .review-main-image {

            width:
                100%;

            height:
                260px;

            object-fit:
                cover;
        }

        .review-footer {

            padding:
                13px 18px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            color:
                var(--white);

            background:
                linear-gradient(
                    135deg,
                    var(--navy),
                    var(--navy-light)
                );
        }

        .review-footer span {
            font-size:
                14px;
        }

        .swiper-pagination-bullet-active {
            background:
                var(--navy);
        }

        .swiper-button-next,
        .swiper-button-prev {

            width:
                44px;

            height:
                44px;

            color:
                var(--navy);

            background:
                var(--white);

            border-radius:
                50%;

            box-shadow:
                0 9px 22px
                rgba(
                    0,
                    0,
                    0,
                    .14
                );
        }

        .swiper-button-next::after,
        .swiper-button-prev::after {

            font-size:
                17px;

            font-weight:
                700;
        }

        .review-button {
            text-align:
                center;
        }

        /*
        |--------------------------------------------------------------------------
        | ORDER
        |--------------------------------------------------------------------------
        */

        .order-section {
            padding:
                55px 0
                90px;
        }

        .order-wrapper {

            max-width:
                1030px;

            margin-inline:
                auto;

            overflow:
                hidden;

            border:
                1px solid
                #d6d6d6;

            border-radius:
                19px;

            background:
                var(--white);

            box-shadow:
                var(--shadow);
        }

        .order-header {

            padding:
                27px 20px
                31px;

            text-align:
                center;

            color:
                var(--white);

            background:
                linear-gradient(
                    135deg,
                    var(--navy),
                    var(--navy-light)
                );
        }

        .order-icon {

            width:
                70px;

            height:
                70px;

            margin:
                0 auto
                14px;

            display:
                grid;

            place-items:
                center;

            color:
                var(--navy);

            background:
                var(--white);

            border-radius:
                50%;

            font-size:
                31px;
        }

        .order-header h2 {

            font-size:
                34px;

            line-height:
                1.1;
        }

        .order-header p {

            margin-top:
                6px;

            font-size:
                18px;
        }

        .order-refund {

            max-width:
                660px;

            margin:
                14px auto
                -16px;

            padding:
                8px 15px;

            color:
                #222;

            background:
                var(--white);

            border-radius:
                5px;

            font-size:
                21px;

            font-weight:
                700;
        }

        .product-selector {

            padding:
                44px 24px
                20px;
        }

        .product-selector h3 {

            margin-bottom:
                17px;

            font-size:
                21px;
        }

        .product-option {

            position:
                relative;

            padding:
                14px 17px;

            display:
                grid;

            grid-template-columns:
                31px 68px
                1fr auto auto;

            align-items:
                center;

            gap:
                12px;

            border:
                1px solid
                var(--gold);

            border-radius:
                8px;

            background:
                #fff8e8;
        }

        .product-option.selected {

            border-color:
                var(--navy);

            background:
                #f8f5eb;
        }

        .product-option input {

            width:
                18px;

            height:
                18px;

            accent-color:
                var(--navy);
        }

        .product-thumb {

            width:
                59px;

            height:
                52px;

            object-fit:
                cover;

            border-radius:
                5px;
        }

        .product-info strong {

            display:
                block;

            font-size:
                17px;
        }

        .product-info small {
            color:
                var(--muted);
        }

        .quantity-control {

            display:
                flex;

            overflow:
                hidden;

            border:
                1px solid
                #d7d7d7;

            border-radius:
                4px;

            background:
                var(--white);
        }

        .quantity-control button {

            width:
                34px;

            height:
                34px;

            border:
                none;

            background:
                #fafafa;

            font-size:
                18px;
        }

        .quantity-control span {

            width:
                38px;

            height:
                34px;

            display:
                grid;

            place-items:
                center;

            border-left:
                1px solid
                #ddd;

            border-right:
                1px solid
                #ddd;
        }

        .product-price {

            min-width:
                77px;

            text-align:
                right;

            font-weight:
                700;
        }

        .regular-price {

            display:
                block;

            color:
                #999;

            font-size:
                12px;

            text-decoration:
                line-through;
        }

        .product-label {

            position:
                absolute;

            top:
                0;

            right:
                0;

            padding:
                2px 8px;

            color:
                #111;

            background:
                #f1bf28;

            font-size:
                13px;

            font-weight:
                700;
        }

        .order-body {

            padding:
                16px 24px
                36px;

            display:
                grid;

            grid-template-columns:
                1.08fr
                .92fr;

            gap:
                54px;
        }

        .form-title {

            margin-bottom:
                16px;

            color:
                var(--navy);

            font-size:
                21px;

            font-weight:
                700;
        }

        .form-group {
            margin-bottom:
                18px;
        }

        .form-group label {

            display:
                block;

            margin-bottom:
                6px;

            font-size:
                18px;

            font-weight:
                600;
        }

        .required {
            color:
                #e10000;
        }

        .form-control {

            width:
                100%;

            min-height:
                56px;

            padding:
                12px 14px;

            border:
                1px solid
                #c5b17f;

            border-radius:
                5px;

            outline:
                none;

            background:
                #fdf9ee;

            font-size:
                17px;

            transition:
                .25s ease;
        }

        textarea.form-control {

            min-height:
                108px;

            resize:
                vertical;
        }

        .form-control:focus {

            border-color:
                var(--navy);

            background:
                var(--white);

            box-shadow:
                0 0 0 4px
                rgba(
                    17,
                    45,
                    92,
                    .09
                );
        }

        .field-error {

            min-height:
                16px;

            display:
                block;

            margin-top:
                5px;

            color:
                #dc2626;

            font-size:
                13px;
        }

        /*
        |--------------------------------------------------------------------------
        | Variant
        |--------------------------------------------------------------------------
        */

        .variant-box {
            margin-bottom:
                20px;
        }

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

        .delivery-area-title {

            display:
                block;

            margin:
                25px 0
                10px;

            color:
                #111;

            font-size:
                18px;

            font-weight:
                700;
        }

        .delivery-area-grid {

            display:
                grid;

            grid-template-columns:
                repeat(
                    2,
                    minmax(
                        0,
                        1fr
                    )
                );

            gap:
                12px;
        }

        .delivery-area-card {

            position:
                relative;

            min-height:
                65px;

            display:
                grid;

            grid-template-columns:
                20px 34px
                minmax(
                    0,
                    1fr
                )
                auto;

            align-items:
                center;

            gap:
                9px;

            padding:
                12px;

            border:
                1px solid
                #d7dbe2;

            border-radius:
                10px;

            background:
                #fff;

            cursor:
                pointer;

            transition:
                .2s ease;
        }

        .delivery-area-card:hover {

            border-color:
                var(--gold-dark);
        }

        .delivery-area-card:has(
            input:checked
        ) {

            border:
                2px solid
                var(--gold-dark);

            background:
                #fff7ef;
        }

        .delivery-area-card input {

            position:
                absolute;

            opacity:
                0;

            pointer-events:
                none;
        }

        .delivery-radio {

            width:
                18px;

            height:
                18px;

            display:
                grid;

            place-items:
                center;

            border:
                1px solid
                #cbd1da;

            border-radius:
                50%;

            background:
                #fff;
        }

        .delivery-radio::after {

            content:
                "";

            width:
                8px;

            height:
                8px;

            border-radius:
                50%;

            background:
                transparent;
        }

        .delivery-area-card:has(
            input:checked
        )
        .delivery-radio {

            border-color:
                var(--gold-dark);

            background:
                var(--gold-dark);
        }

        .delivery-area-card:has(
            input:checked
        )
        .delivery-radio::after {

            background:
                #fff;
        }

        .delivery-location-icon {

            width:
                32px;

            height:
                32px;

            display:
                grid;

            place-items:
                center;

            border-radius:
                8px;

            color:
                #868e98;

            background:
                #f4f5f6;
        }

        .delivery-area-card:has(
            input:checked
        )
        .delivery-location-icon {

            color:
                var(--gold-dark);

            background:
                #fff0df;
        }

        .delivery-copy {

            min-width:
                0;
        }

        .delivery-copy strong {

            display:
                block;

            color:
                #202632;

            font-size:
                14px;

            line-height:
                1.25;
        }

        .delivery-copy small {

            display:
                block;

            margin-top:
                2px;

            color:
                #8a9099;

            font-size:
                11px;

            line-height:
                1.25;
        }

        .delivery-cost {

            color:
                var(--navy);

            font-size:
                12px;

            font-weight:
                700;

            white-space:
                nowrap;
        }

        /*
        |--------------------------------------------------------------------------
        | Summary
        |--------------------------------------------------------------------------
        */

        .summary-table {

            width:
                100%;

            margin-bottom:
                23px;

            border-collapse:
                collapse;
        }

        .summary-table th,
        .summary-table td {

            padding:
                12px 0;

            text-align:
                left;

            vertical-align:
                middle;

            border-bottom:
                1px dashed
                #ccc;
        }

        .summary-table th:last-child,
        .summary-table td:last-child {
            text-align:
                right;
        }

        .summary-product {

            display:
                flex;

            align-items:
                center;

            gap:
                10px;
        }

        .summary-product img {

            width:
                43px;

            height:
                43px;

            object-fit:
                cover;

            border-radius:
                4px;
        }

        .summary-product-copy {

            display:
                flex;

            flex-direction:
                column;
        }

        .summary-product-copy small {

            color:
                var(--muted);

            font-size:
                12px;
        }

        .payment-box {

            margin-bottom:
                14px;

            padding:
                17px;

            background:
                #f4f4f4;
        }

        .payment-box h4 {

            margin-bottom:
                15px;

            font-size:
                18px;

            font-weight:
                500;
        }

        .payment-message {

            position:
                relative;

            padding:
                15px;

            color:
                #666;

            background:
                #e5e5e5;
        }

        .payment-message::before {

            content:
                "";

            position:
                absolute;

            top:
                -10px;

            left:
                25px;

            width:
                20px;

            height:
                20px;

            transform:
                rotate(
                    45deg
                );

            background:
                #e5e5e5;
        }

        .place-order {

            width:
                100%;

            min-height:
                63px;

            border:
                none;

            border-radius:
                4px;

            color:
                var(--white);

            background:
                linear-gradient(
                    135deg,
                    var(--navy),
                    var(--navy-light)
                );

            font-size:
                21px;

            font-weight:
                700;

            transition:
                .3s ease;
        }

        .place-order:hover {

            transform:
                translateY(
                    -2px
                );

            box-shadow:
                0 13px 26px
                rgba(
                    17,
                    45,
                    92,
                    .23
                );
        }

        .place-order.is-loading {

            pointer-events:
                none;

            opacity:
                .7;
        }

        .place-order.is-loading::after {

            content:
                "";

            width:
                18px;

            height:
                18px;

            display:
                inline-block;

            margin-left:
                10px;

            vertical-align:
                -3px;

            border:
                2px solid
                rgba(
                    255,
                    255,
                    255,
                    .35
                );

            border-top-color:
                #fff;

            border-radius:
                50%;

            animation:
                spinner
                .7s linear
                infinite;
        }

        @keyframes spinner {

            to {
                transform:
                    rotate(
                        360deg
                    );
            }
        }

        .form-disclaimer {

            padding:
                0 24px
                28px;

            color:
                var(--muted);

            text-align:
                center;

            font-size:
                14px;
        }

        /*
        |--------------------------------------------------------------------------
        | Footer Products
        |--------------------------------------------------------------------------
        */

        .footer-products {

            padding:
                70px 0;

            background:
                #fff;
        }

        .footer-products-title {

            margin-bottom:
                30px;

            color:
                var(--navy);

            text-align:
                center;

            font-size:
                36px;

            font-weight:
                700;
        }

        .footer-product-grid {

            display:
                grid;

            grid-template-columns:
                repeat(
                    4,
                    minmax(
                        0,
                        1fr
                    )
                );

            gap:
                18px;
        }

        .footer-product-card {

            overflow:
                hidden;

            border:
                1px solid
                #eee;

            border-radius:
                15px;

            background:
                #fff;

            box-shadow:
                0 10px 28px
                rgba(
                    0,
                    0,
                    0,
                    .06
                );
        }

        .footer-product-card img {

            width:
                100%;

            aspect-ratio:
                1 / 1;

            object-fit:
                cover;
        }

        .footer-product-body {
            padding:
                13px;
        }

        .footer-product-body h3 {

            min-height:
                45px;

            color:
                #1e293b;

            font-size:
                16px;

            line-height:
                1.4;
        }

        .footer-product-body strong {

            color:
                var(--navy);

            font-size:
                18px;
        }

        /*
        |--------------------------------------------------------------------------
        | FOOTER
        |--------------------------------------------------------------------------
        */

        .footer {

            padding:
                37px 20px
                24px;

            color:
                var(--white);

            text-align:
                center;

            background:
                #121315;
        }

        .footer h3 {

            margin-bottom:
                17px;

            font-size:
                24px;

            font-weight:
                600;
        }

        .social-links {

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                10px;

            margin-bottom:
                21px;
        }

        .social-links a {

            width:
                41px;

            height:
                41px;

            display:
                grid;

            place-items:
                center;

            color:
                #111;

            background:
                var(--white);

            border-radius:
                5px;

            font-size:
                19px;

            transition:
                .25s ease;
        }

        .social-links a:hover {

            color:
                var(--navy);

            background:
                var(--gold);

            transform:
                translateY(
                    -4px
                );
        }

        .copyright {

            color:
                #d7d7d7;

            font-size:
                14px;
        }

        /*
        |--------------------------------------------------------------------------
        | Floating
        |--------------------------------------------------------------------------
        */

        .whatsapp-button {

            position:
                fixed;

            right:
                20px;

            bottom:
                22px;

            width:
                59px;

            height:
                59px;

            z-index:
                80;

            display:
                grid;

            place-items:
                center;

            color:
                var(--white);

            background:
                #25d366;

            border-radius:
                50%;

            font-size:
                30px;

            box-shadow:
                0 12px 30px
                rgba(
                    37,
                    211,
                    102,
                    .38
                );

            animation:
                whatsappPulse
                2s infinite;
        }

        @keyframes whatsappPulse {

            0% {

                box-shadow:
                    0 0 0 0
                    rgba(
                        37,
                        211,
                        102,
                        .42
                    ),
                    0 12px 30px
                    rgba(
                        37,
                        211,
                        102,
                        .38
                    );
            }

            70% {

                box-shadow:
                    0 0 0 17px
                    rgba(
                        37,
                        211,
                        102,
                        0
                    ),
                    0 12px 30px
                    rgba(
                        37,
                        211,
                        102,
                        .38
                    );
            }

            100% {

                box-shadow:
                    0 0 0 0
                    rgba(
                        37,
                        211,
                        102,
                        0
                    ),
                    0 12px 30px
                    rgba(
                        37,
                        211,
                        102,
                        .38
                    );
            }
        }

        .mobile-order-button {

            display:
                none;

            position:
                fixed;

            left:
                12px;

            right:
                12px;

            bottom:
                12px;

            min-height:
                55px;

            z-index:
                75;

            align-items:
                center;

            justify-content:
                center;

            color:
                #111;

            background:
                linear-gradient(
                    135deg,
                    var(--gold-light),
                    var(--gold-dark)
                );

            border-radius:
                8px;

            font-size:
                20px;

            font-weight:
                700;

            box-shadow:
                0 12px 32px
                rgba(
                    0,
                    0,
                    0,
                    .22
                );
        }

        /*
        |--------------------------------------------------------------------------
        | Toast
        |--------------------------------------------------------------------------
        */

        .landing-toast {

            position:
                fixed;

            top:
                20px;

            right:
                20px;

            z-index:
                10000;

            max-width:
                min(
                    390px,
                    calc(
                        100% - 30px
                    )
                );

            padding:
                13px 18px;

            border-radius:
                9px;

            color:
                #fff;

            background:
                #166534;

            box-shadow:
                0 15px 35px
                rgba(
                    0,
                    0,
                    0,
                    .18
                );
        }

        .landing-toast.error {
            background:
                #b91c1c;
        }

        /*
        |--------------------------------------------------------------------------
        | SUCCESS MODAL
        |--------------------------------------------------------------------------
        */

        .modal-overlay {

            position:
                fixed;

            inset:
                0;

            z-index:
                200;

            padding:
                20px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            background:
                rgba(
                    0,
                    0,
                    0,
                    .72
                );
        }

        .modal-overlay[hidden] {
            display:
                none;
        }

        .success-modal {

            width:
                min(
                    450px,
                    100%
                );

            padding:
                38px 26px;

            text-align:
                center;

            border-radius:
                20px;

            background:
                var(--white);

            animation:
                modalIn
                .25s ease;
        }

        @keyframes modalIn {

            from {
                transform:
                    scale(
                        .88
                    );

                opacity:
                    0;
            }

            to {
                transform:
                    scale(
                        1
                    );

                opacity:
                    1;
            }
        }

        .success-icon {

            width:
                86px;

            height:
                86px;

            margin:
                0 auto
                16px;

            display:
                grid;

            place-items:
                center;

            color:
                var(--navy);

            background:
                #edf5db;

            border-radius:
                50%;

            font-size:
                42px;
        }

        .success-modal h3 {

            margin-bottom:
                8px;

            color:
                var(--navy);

            font-size:
                31px;
        }

        .success-modal p {

            color:
                #555;

            font-size:
                17px;

            line-height:
                1.5;
        }

        .success-order-number {

            margin:
                15px 0;

            padding:
                10px;

            border:
                1px dashed
                #ccc;

            border-radius:
                7px;

            background:
                #fafafa;
        }

        .success-actions {

            display:
                flex;

            justify-content:
                center;

            flex-wrap:
                wrap;

            gap:
                10px;

            margin-top:
                20px;
        }

        .modal-close,
        .invoice-button {

            min-height:
                43px;

            padding:
                10px 23px;

            border:
                none;

            border-radius:
                6px;

            color:
                var(--white);

            background:
                var(--navy);

            font-size:
                16px;

            font-weight:
                600;
        }

        .invoice-button {
            background:
                var(--green);
        }

        /*
        |--------------------------------------------------------------------------
        | RESPONSIVE
        |--------------------------------------------------------------------------
        */

        @media (
            max-width:
            991px
        ) {

            .hero-title span {

                -webkit-text-stroke:
                    5px
                    #0b0b0b;

                text-shadow:
                    0 5px 0
                    #080808;
            }

            .hero-product-area {
                height:
                    450px;
            }

            .ingredient-image {
                left:
                    6%;
            }

            .clay-image {
                right:
                    6%;
            }

            .benefit-diagram {

                min-height:
                    auto;

                display:
                    flex;

                flex-direction:
                    column;

                align-items:
                    center;
            }

            .benefit-backdrop,
            .benefit-head,
            .diagram-line,
            .benefit-item::before,
            .benefit-item::after {

                display:
                    none;
            }

            .benefit-product {

                position:
                    relative;

                left:
                    auto;

                top:
                    auto;

                width:
                    210px;

                height:
                    300px;

                margin:
                    0 auto
                    -35px;

                transform:
                    rotate(
                        -6deg
                    );
            }

            .natural-badge {

                top:
                    135px;

                left:
                    calc(
                        50% + 40px
                    );
            }

            .benefit-mobile-grid {

                width:
                    100%;

                display:
                    grid;

                grid-template-columns:
                    repeat(
                        2,
                        1fr
                    );

                gap:
                    15px;

                margin-top:
                    50px;
            }

            .benefit-item,
            .benefit-item.left-item,
            .benefit-item.right-item {

                position:
                    relative;

                inset:
                    auto;

                width:
                    auto;

                min-height:
                    95px;

                justify-content:
                    center;

                text-align:
                    center;

                font-size:
                    22px;
            }

            .order-body {

                grid-template-columns:
                    1fr;

                gap:
                    24px;
            }

            .footer-product-grid {

                grid-template-columns:
                    repeat(
                        3,
                        minmax(
                            0,
                            1fr
                        )
                    );
            }
        }

        @media (
            max-width:
            767px
        ) {

            .container {

                width:
                    min(
                        calc(
                            100% - 22px
                        ),
                        1120px
                    );
            }

            .section {
                padding:
                    61px 0;
            }

            .site-logo-name {
                font-size:
                    24px;
            }

            .hero-title span {
                padding-inline:
                    4px;
            }

            .hero-promise {

                padding:
                    13px 12px
                    35px;

                font-size:
                    17px;
            }

            .refund-badge {

                width:
                    calc(
                        100% - 22px
                    );

                border-width:
                    5px;

                font-size:
                    16px;
            }

            .customer-heading {
                font-size:
                    32px;
            }

            .customer-avatars img {

                width:
                    38px;

                height:
                    38px;
            }

            .customer-avatars img:last-child {
                display:
                    none;
            }

            .customer-number {

                width:
                    42px;

                height:
                    42px;
            }

            .customer-text {
                font-size:
                    22px;
            }

            .hero-product-area {
                height:
                    405px;
            }

            .main-product-image {

                top:
                    25px;

                width:
                    245px;

                height:
                    325px;
            }

            .ingredient-image {

                left:
                    -25px;

                bottom:
                    40px;

                width:
                    165px;

                height:
                    135px;
            }

            .clay-image {

                right:
                    -25px;

                bottom:
                    40px;

                width:
                    165px;

                height:
                    135px;
            }

            .nature-base {
                height:
                    130px;
            }

            .benefit-mobile-grid {
                grid-template-columns:
                    1fr;
            }

            .benefit-item,
            .benefit-item.left-item,
            .benefit-item.right-item {

                min-height:
                    78px;

                font-size:
                    21px;
            }

            .promo-image-box img {
                height:
                    500px;
            }

            .promo-overlay {

                padding:
                    32px 24px;

                align-items:
                    flex-end;

                background:
                    linear-gradient(
                        180deg,
                        rgba(
                            5,
                            22,
                            53,
                            .1
                        ),
                        rgba(
                            5,
                            22,
                            53,
                            .9
                        )
                    );
            }

            .promo-content p {
                font-size:
                    17px;
            }

            .usage-box {

                padding:
                    70px 18px
                    28px;
            }

            .feature-grid {

                grid-template-columns:
                    1fr;

                gap:
                    10px;
            }

            .feature-item {
                font-size:
                    19px;
            }

            .swiper-button-next,
            .swiper-button-prev {
                display:
                    none;
            }

            .product-selector {

                padding:
                    41px 13px
                    18px;
            }

            .product-option {

                grid-template-columns:
                    25px 54px
                    1fr;

                padding:
                    14px 10px;

                gap:
                    8px;
            }

            .product-thumb {

                width:
                    51px;

                height:
                    47px;
            }

            .quantity-control,
            .product-price {

                grid-column:
                    3;

                margin-top:
                    5px;
            }

            .product-price {
                text-align:
                    left;
            }

            .order-body {

                padding:
                    12px 14px
                    27px;
            }

            .order-refund {
                font-size:
                    17px;
            }

            .delivery-area-grid {
                grid-template-columns:
                    1fr;
            }

            .mobile-order-button {
                display:
                    flex;
            }

            .whatsapp-button {

                right:
                    17px;

                bottom:
                    79px;

                width:
                    54px;

                height:
                    54px;
            }

            .footer {
                padding-bottom:
                    91px;
            }

            .footer-product-grid {

                grid-template-columns:
                    repeat(
                        2,
                        minmax(
                            0,
                            1fr
                        )
                    );

                gap:
                    10px;
            }
        }

        @media (
            max-width:
            430px
        ) {

            .main-product-image {

                width:
                    220px;

                height:
                    300px;
            }

            .ingredient-image,
            .clay-image {

                width:
                    145px;

                height:
                    120px;
            }

            .customer-pill {
                padding-right:
                    12px;
            }

            .customer-text {
                font-size:
                    20px;
            }

            .natural-badge {

                width:
                    98px;

                height:
                    98px;

                left:
                    calc(
                        50% + 26px
                    );

                font-size:
                    14px;
            }

            .natural-badge strong {
                font-size:
                    23px;
            }
        }

    </style>

</head>

<body>

@if($previewMode)

    <div class="preview-bar">

        <strong>
            ADMIN PREVIEW
        </strong>

        <span>
            Preview mode-এ order submit হবে না
        </span>

    </div>

@endif

@foreach(
    $enabledSections
    as $section
)

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

    {{-- ================================================================
         HERO
    ================================================================= --}}

    @if(
        $section->type === 'hero'
    )

        <section
            class="hero"
            id="home"
        >

            <div class="container hero-inner">

                <div
                    class="site-logo"
                    data-aos="fade-down"
                >

                    <div class="site-logo-name">

                        {{ data_get(
                            $content,
                            'brand_name',
                            'NEBULOID'
                        ) }}

                    </div>

                    <div class="site-logo-line"></div>

                </div>

                <h1 class="hero-title">

                    <span
                        class="line-one"
                        data-aos="zoom-in"
                    >

                        {{ data_get(
                            $content,
                            'title_1',
                            'মাত্র ৭ দিনেই'
                        ) }}

                    </span>

                    <span
                        class="line-two"
                        data-aos="zoom-in"
                        data-aos-delay="100"
                    >

                        {{ data_get(
                            $content,
                            'title_2',
                            'আপনার প্রয়োজনের সেরা সমাধান'
                        ) }}

                    </span>

                    <span
                        class="line-three"
                        data-aos="zoom-in"
                        data-aos-delay="200"
                    >

                        {{ data_get(
                            $content,
                            'title_3',
                            $product->name
                        ) }}

                    </span>

                </h1>

                <div
                    class="stars"
                    data-aos="fade-up"
                    data-aos-delay="300"
                >

                    @php
                        $rating = max(
                            0,
                            min(
                                5,
                                (float) data_get(
                                    $content,
                                    'rating',
                                    4.8
                                )
                            )
                        );

                        $fullStars =
                            (int) floor(
                                $rating
                            );
                    @endphp

                    @for(
                        $star = 1;
                        $star <= 5;
                        $star++
                    )

                        @if(
                            $star <= $fullStars
                        )

                            <i class="fa-solid fa-star"></i>

                        @else

                            <i class="fa-regular fa-star"></i>

                        @endif

                    @endfor

                </div>

                <div
                    class="hero-promise"
                    data-aos="fade-up"
                    data-aos-delay="400"
                >

                    <strong>

                        {{ data_get(
                            $content,
                            'promise_title',
                            'প্রিমিয়াম মানের পণ্য'
                        ) }}

                    </strong>

                    {{ 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-aos="fade-up"
                    data-aos-delay="500"
                >

                    {{ data_get(
                        $content,
                        'customer_heading',
                        'উপকৃত হয়েছেন'
                    ) }}

                </div>

                <div
                    class="customer-pill"
                    data-aos="zoom-in"
                    data-aos-delay="550"
                >

                    <div class="customer-avatars">

                        <img
                            src="https://randomuser.me/api/portraits/women/44.jpg"
                            alt="Customer"
                        >

                        <img
                            src="https://randomuser.me/api/portraits/men/32.jpg"
                            alt="Customer"
                        >

                        <img
                            src="https://randomuser.me/api/portraits/women/65.jpg"
                            alt="Customer"
                        >

                        <img
                            src="https://randomuser.me/api/portraits/men/46.jpg"
                            alt="Customer"
                        >

                    </div>

                    <div class="customer-number">

                        <i class="fa-solid fa-users"></i>

                    </div>

                    <div class="customer-text">

                        {{ data_get(
                            $content,
                            'customer_count',
                            '০২ লক্ষ+ কাস্টমারস'
                        ) }}

                    </div>

                </div>

                <div class="drawn-arrow"></div>

                <div
                    class="hero-product-area"
                    data-aos="fade-up"
                    data-aos-duration="1100"
                >

                    <div class="hero-glow"></div>

                    <img
                        class="main-product-image"
                        src="{{ data_get(
                            $content,
                            'main_image_url'
                        ) ?: $mainImage }}"
                        alt="{{ $product->name }}"
                        fetchpriority="high"
                    >

                    <img
                        class="ingredient-image"
                        src="{{ data_get(
                            $content,
                            'side_image_1_url'
                        ) ?: $image2 }}"
                        alt="{{ $product->name }}"
                    >

                    <img
                        class="clay-image"
                        src="{{ data_get(
                            $content,
                            'side_image_2_url'
                        ) ?: $image3 }}"
                        alt="{{ $product->name }}"
                    >

                    <div class="nature-base"></div>

                </div>

            </div>

        </section>

    {{-- ================================================================
         BENEFITS
    ================================================================= --}}

    @elseif(
        $section->type === 'benefits'
    )

        @php
            $sectionBenefits =
                collect(
                    data_get(
                        $content,
                        'items',
                        []
                    )
                )
                    ->filter()
                    ->values();

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

        <section
            class="section benefit-section pattern-bg"
            id="benefits"
        >

            <div class="container">

                <h2
                    class="section-title"
                    data-aos="fade-up"
                >

                    {{ data_get(
                        $content,
                        'heading',
                        $product->name
                    ) }}

                </h2>

                <div
                    class="section-subtitle"
                    data-aos="fade-up"
                    data-aos-delay="100"
                >

                    {{ data_get(
                        $content,
                        'subheading',
                        'যে সুবিধাগুলো পাবেন'
                    ) }}

                </div>

                <div class="benefit-diagram">

                    <div class="benefit-backdrop"></div>

                    <div class="benefit-head left">
                        প্রকৃতির ছোঁয়ায়
                    </div>

                    <div class="benefit-head right">
                        সেরা সমাধান
                    </div>

                    <img
                        class="benefit-product"
                        src="{{ $mainImage }}"
                        alt="{{ $product->name }}"
                        data-aos="zoom-in"
                    >

                    <div
                        class="natural-badge"
                        data-aos="zoom-in"
                        data-aos-delay="250"
                    >

                        @php
                            $badgeText = trim(
                                (string) data_get(
                                    $content,
                                    'badge',
                                    '100% QUALITY'
                                )
                            );
                        @endphp

                        <div>

                            <strong>
                                100%
                            </strong>

                            {{ str_ireplace(
                                '100%',
                                '',
                                $badgeText
                            ) }}

                        </div>

                    </div>

                    <div class="diagram-line"></div>

                    <div class="benefit-mobile-grid">

                        <div
                            class="benefit-item left-item benefit-one"
                            data-aos="fade-right"
                        >
                            {{ $sectionBenefits->get(0) }}
                        </div>

                        <div
                            class="benefit-item left-item benefit-two"
                            data-aos="fade-right"
                            data-aos-delay="100"
                        >
                            {{ $sectionBenefits->get(1) }}
                        </div>

                        <div
                            class="benefit-item left-item benefit-three"
                            data-aos="fade-right"
                            data-aos-delay="200"
                        >
                            {{ $sectionBenefits->get(2) }}
                        </div>

                        <div
                            class="benefit-item right-item benefit-four"
                            data-aos="fade-left"
                        >
                            {{ $sectionBenefits->get(3) }}
                        </div>

                        <div
                            class="benefit-item right-item benefit-five"
                            data-aos="fade-left"
                            data-aos-delay="100"
                        >
                            {{ $sectionBenefits->get(4) }}
                        </div>

                        <div
                            class="benefit-item right-item benefit-six"
                            data-aos="fade-left"
                            data-aos-delay="200"
                        >
                            {{ $sectionBenefits->get(5) }}
                        </div>

                    </div>

                </div>

                <div
                    class="benefit-buttons"
                    data-aos="fade-up"
                >

                    <button
                        type="button"
                        class="green-button"
                    >

                        <i class="fa-solid fa-leaf"></i>

                        প্রিমিয়াম কোয়ালিটি

                    </button>

                    <button
                        type="button"
                        class="gold-button scroll-order"
                    >
                        অর্ডার করুন
                    </button>

                </div>

            </div>

        </section>

    {{-- ================================================================
         PROMO
    ================================================================= --}}

    @elseif(
        $section->type === 'promo'
    )

        <section class="promo-banner pattern-bg">

            <div class="container">

                <div
                    class="promo-image-box"
                    data-aos="zoom-in"
                >

                    <img
                        src="{{ data_get(
                            $content,
                            'image_url'
                        ) ?: $promoImage }}"
                        alt="{{ $product->name }}"
                    >

                    <div class="promo-overlay">

                        <div class="promo-content">

                            <small>

                                {{ data_get(
                                    $content,
                                    'eyebrow',
                                    'NEBULOID SELECTED PRODUCT'
                                ) }}

                            </small>

                            <h2>

                                {{ data_get(
                                    $content,
                                    'title',
                                    $product->name
                                ) }}

                            </h2>

                            <p>

                                {{ data_get(
                                    $content,
                                    'text',
                                    strip_tags(
                                        (string) $product->short_description
                                    )
                                ) }}

                            </p>

                            <button
                                type="button"
                                class="gold-button scroll-order"
                            >

                                <i class="fa-solid fa-cart-shopping"></i>

                                {{ data_get(
                                    $content,
                                    'button_text',
                                    'এখনই অর্ডার করুন'
                                ) }}

                            </button>

                        </div>

                    </div>

                </div>

            </div>

        </section>

    {{-- ================================================================
         USAGE
    ================================================================= --}}

    @elseif(
        $section->type === 'usage'
    )

        @php
            $sectionFeatures =
                collect(
                    data_get(
                        $content,
                        'features',
                        []
                    )
                )
                    ->filter()
                    ->values();

            if (
                $sectionFeatures->isEmpty()
            ) {
                $sectionFeatures = collect([
                    '১০০% অরিজিনাল',
                    'দ্রুত ডেলিভারি',
                    'ক্যাশ অন ডেলিভারি',
                ]);
            }
        @endphp

        <section
            class="section usage-section pattern-bg"
            id="usage"
        >

            <div class="container">

                <h2
                    class="usage-title"
                    data-aos="fade-up"
                >

                    {{ data_get(
                        $content,
                        'title',
                        'সহজ ব্যবহারবিধি'
                    ) }}

                </h2>

                <div
                    class="usage-box"
                    data-aos="zoom-in-up"
                    data-aos-duration="900"
                >

                    <div class="usage-icon">

                        <i class="fa-solid fa-thumbtack"></i>

                    </div>

                    <p>

                        {{ data_get(
                            $content,
                            'text',
                            'পণ্যের নির্দেশনা অনুযায়ী ব্যবহার করুন'
                        ) }}

                        <strong>

                            {{ data_get(
                                $content,
                                'highlight',
                                'সেরা ফলাফলের জন্য নিয়মিত ব্যবহার করুন'
                            ) }}

                        </strong>

                    </p>

                    <div class="drawn-line"></div>

                    <div class="feature-grid">

                        @foreach(
                            $sectionFeatures
                            as $featureIndex => $feature
                        )

                            <div
                                class="feature-item"
                                data-aos="fade-up"
                                data-aos-delay="{{ ($featureIndex + 1) * 100 }}"
                            >

                                <i class="fa-solid fa-check"></i>

                                {{ $feature }}

                            </div>

                        @endforeach

                    </div>

                    <div class="usage-button">

                        <button
                            type="button"
                            class="gold-button scroll-order"
                        >
                            অর্ডার করুন
                        </button>

                    </div>

                </div>

            </div>

        </section>

    {{-- ================================================================
         REVIEWS
    ================================================================= --}}

    @elseif(
        $section->type === 'reviews'
    )

        @php
            $sectionReviews =
                collect(
                    data_get(
                        $content,
                        'items',
                        []
                    )
                )
                    ->filter(
                        fn ($review) =>
                            filled(
                                data_get(
                                    $review,
                                    'text'
                                )
                            )
                    )
                    ->values();
        @endphp

        @if(
            $sectionReviews->isNotEmpty()
        )

            <section
                class="section reviews-section pattern-bg"
                id="reviews"
            >

                <div class="container">

                    <h2
                        class="review-heading"
                        data-aos="fade-up"
                    >

                        {{ data_get(
                            $content,
                            'heading',
                            'আমাদের কাস্টমারদের অভিজ্ঞতা'
                        ) }}

                    </h2>

                    <p
                        class="review-description"
                        data-aos="fade-up"
                        data-aos-delay="100"
                    >

                        {{ data_get(
                            $content,
                            'subheading',
                            'নিয়মিত ব্যবহারকারীদের কিছু অভিজ্ঞতা'
                        ) }}

                    </p>

                    <div
                        class="swiper review-swiper"
                        data-aos="fade-up"
                        data-aos-delay="200"
                    >

                        <div class="swiper-wrapper">

                            @foreach(
                                $sectionReviews
                                as $reviewIndex => $review
                            )

                                @php
                                    $reviewImage =
                                        data_get(
                                            $review,
                                            'image_url'
                                        )
                                        ?: $productImages->get(
                                            $reviewIndex
                                                % max(
                                                    1,
                                                    $productImages->count()
                                                ),
                                            $mainImage
                                        );

                                    $reviewRating = max(
                                        1,
                                        min(
                                            5,
                                            (int) data_get(
                                                $review,
                                                'rating',
                                                5
                                            )
                                        )
                                    );
                                @endphp

                                <div class="swiper-slide">

                                    <article class="review-card">

                                        <div class="review-content">

                                            <div class="quote-mark">
                                                “
                                            </div>

                                            <p>

                                                {{ data_get(
                                                    $review,
                                                    'text'
                                                ) }}

                                            </p>

                                            <div class="review-user">

                                                <img
                                                    src="{{ $reviewImage }}"
                                                    alt="{{ data_get(
                                                        $review,
                                                        'name',
                                                        'Customer'
                                                    ) }}"
                                                >

                                                <div>

                                                    <strong>

                                                        {{ data_get(
                                                            $review,
                                                            'name',
                                                            'ভেরিফাইড কাস্টমার'
                                                        ) }}

                                                    </strong>

                                                    <small>

                                                        {{ data_get(
                                                            $review,
                                                            'location',
                                                            'Bangladesh'
                                                        ) }}

                                                    </small>

                                                </div>

                                            </div>

                                        </div>

                                        <img
                                            class="review-main-image"
                                            src="{{ $reviewImage }}"
                                            alt="{{ $product->name }}"
                                        >

                                        <div class="review-footer">

                                            <span>

                                                <i class="fa-solid fa-circle-check"></i>

                                                ভেরিফাইড কাস্টমার

                                            </span>

                                            <span>

                                                @for(
                                                    $r = 1;
                                                    $r <= $reviewRating;
                                                    $r++
                                                )
                                                    ★
                                                @endfor

                                            </span>

                                        </div>

                                    </article>

                                </div>

                            @endforeach

                        </div>

                        <div class="swiper-pagination"></div>

                        <div class="swiper-button-prev"></div>

                        <div class="swiper-button-next"></div>

                    </div>

                    <div class="review-button">

                        <button
                            type="button"
                            class="gold-button scroll-order"
                        >

                            <i class="fa-solid fa-cart-shopping"></i>

                            অর্ডার করুন

                        </button>

                    </div>

                </div>

            </section>

        @endif

    {{-- ================================================================
         ORDER
    ================================================================= --}}

    @elseif(
        $section->type === 'order'
    )

        <section
            class="order-section pattern-bg"
            id="order"
        >

            <div class="container">

                <div
                    class="order-wrapper"
                    data-aos="fade-up"
                >

                    <div class="order-header">

                        <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-refund">

                            {{ data_get(
                                $content,
                                'refund_text',
                                'সন্তুষ্ট না হলে ১০০% টাকা ফেরত'
                            ) }}

                        </div>

                    </div>

                    <div class="product-selector">

                        <h3>
                            Your Product
                        </h3>

                        <label
                            class="product-option selected"
                        >

                            <input
                                type="radio"
                                checked
                                tabindex="-1"
                            >

                            <img
                                class="product-thumb"
                                src="{{ $mainImage }}"
                                alt="{{ $product->name }}"
                            >

                            <span class="product-info">

                                <strong>
                                    {{ $product->name }}
                                </strong>

                                @if(
                                    $product->has_variants
                                    && $defaultVariant
                                )

                                    <small id="topVariantName">
                                        {{ $defaultVariant->name }}
                                    </small>

                                @else

                                    <small>
                                        {{ $product->stock_status }}
                                    </small>

                                @endif

                            </span>

                            <span class="quantity-control">

                                <button
                                    type="button"
                                    id="lpQtyMinus"
                                    aria-label="Decrease quantity"
                                >
                                    −
                                </button>

                                <span id="lpQtyText">
                                    1
                                </span>

                                <button
                                    type="button"
                                    id="lpQtyPlus"
                                    aria-label="Increase quantity"
                                >
                                    +
                                </button>

                            </span>

                            <span class="product-price">

                                <span id="topProductPrice">
                                    {{ number_format(
                                        $basePrice,
                                        0
                                    ) }}৳
                                </span>

                                @if(
                                    $regularPrice
                                    > $basePrice
                                )

                                    <span class="regular-price">

                                        {{ number_format(
                                            $regularPrice,
                                            0
                                        ) }}৳

                                    </span>

                                @endif

                            </span>

                            @if(
                                $regularPrice
                                > $basePrice
                            )

                                <span class="product-label">
                                    অফার
                                </span>

                            @endif

                        </label>

                    </div>

                    <form
                        id="lpOrderForm"
                        novalidate
                    >

                        @csrf

                        <input
                            type="hidden"
                            name="token"
                            id="lpIncompleteToken"
                        >

                        <input
                            type="hidden"
                            name="quantity"
                            id="lpQuantityInput"
                            value="1"
                        >

                        <div class="order-body">

                            {{-- Billing --}}

                            <div>

                                <h3 class="form-title">
                                    Billing details
                                </h3>

                                <div class="form-group">

                                    <label for="customerName">

                                        {{ data_get(
                                            $content,
                                            'name_label',
                                            'আপনার পূর্ণ নাম'
                                        ) }}

                                        <span class="required">*</span>

                                    </label>

                                    <input
                                        type="text"
                                        id="customerName"
                                        name="customer_name"
                                        class="form-control"
                                        placeholder="আপনার নাম লিখুন"
                                        autocomplete="name"
                                    >

                                    <small
                                        class="field-error"
                                        data-field-error="customer_name"
                                    ></small>

                                </div>

                                <div class="form-group">

                                    <label for="customerPhone">

                                        {{ data_get(
                                            $content,
                                            'phone_label',
                                            'আপনার ফোন নাম্বার'
                                        ) }}

                                        <span class="required">*</span>

                                    </label>

                                    <input
                                        type="tel"
                                        id="customerPhone"
                                        name="customer_phone"
                                        class="form-control"
                                        placeholder="01XXXXXXXXX"
                                        maxlength="11"
                                        inputmode="numeric"
                                        autocomplete="tel"
                                    >

                                    <small
                                        class="field-error"
                                        data-field-error="customer_phone"
                                    ></small>

                                </div>

                                <div class="form-group">

                                    <label for="customerAddress">

                                        {{ data_get(
                                            $content,
                                            'address_label',
                                            'বাসার পূর্ণ ঠিকানা'
                                        ) }}

                                        <span class="required">*</span>

                                    </label>

                                    <textarea
                                        id="customerAddress"
                                        name="address"
                                        class="form-control"
                                        placeholder="এলাকা, থানা ও জেলা সহ ঠিকানা লিখুন"
                                        autocomplete="street-address"
                                    ></textarea>

                                    <small
                                        class="field-error"
                                        data-field-error="address"
                                    ></small>

                                </div>

                                {{-- Product Variant --}}

                                @if(
                                    $product->has_variants
                                    && $variants->isNotEmpty()
                                )

                                    <div class="form-group variant-box">

                                        <label for="lpVariantSelect">

                                            Product Option

                                            <span class="required">*</span>

                                        </label>

                                        <select
                                            name="variant_id"
                                            id="lpVariantSelect"
                                            class="form-control"
                                        >

                                            @foreach(
                                                $variants
                                                as $variant
                                            )

                                                @php
                                                    $variantPrice =
                                                        (float) (
                                                            $variant->sale_price
                                                            ?? $variant->regular_price
                                                            ?? 0
                                                        );
                                                @endphp

                                                <option
                                                    value="{{ $variant->id }}"
                                                    @selected(
                                                        $defaultVariant
                                                        && $defaultVariant->id
                                                            === $variant->id
                                                    )
                                                >

                                                    {{ $variant->name }}

                                                    —

                                                    {{ number_format(
                                                        $variantPrice,
                                                        0
                                                    ) }}৳

                                                </option>

                                            @endforeach

                                        </select>

                                        <small
                                            class="field-error"
                                            data-field-error="variant_id"
                                        ></small>

                                    </div>

                                @endif

                                {{-- Delivery --}}

                                <span class="delivery-area-title">

                                    {{ data_get(
                                        $content,
                                        'delivery_heading',
                                        'ডেলিভারি এলাকা'
                                    ) }}

                                    <span class="required">*</span>

                                </span>

                                <div
                                    class="delivery-area-grid"
                                    id="lpDeliveryGrid"
                                >

                                    @foreach(
                                        $deliveryAreas
                                        as $areaIndex => $area
                                    )

                                        <label class="delivery-area-card">

                                            <input
                                                type="radio"
                                                name="delivery_area"
                                                value="{{ $area['key'] }}"
                                                @checked(
                                                    $areaIndex === 0
                                                )
                                            >

                                            <span class="delivery-radio"></span>

                                            <span class="delivery-location-icon">

                                                <i class="fa-solid fa-location-dot"></i>

                                            </span>

                                            <span class="delivery-copy">

                                                <strong>
                                                    {{ $area['label'] }}
                                                </strong>

                                                <small>
                                                    এই এলাকায় পণ্য ডেলিভারি করা হবে
                                                </small>

                                            </span>

                                            <span
                                                class="delivery-cost"
                                                data-area-price="{{ $area['key'] }}"
                                            >
                                                —
                                            </span>

                                        </label>

                                    @endforeach

                                </div>

                                <small
                                    class="field-error"
                                    data-field-error="delivery_area"
                                ></small>

                            </div>

                            {{-- Summary --}}

                            <div>

                                <h3 class="form-title">
                                    Your order
                                </h3>

                                <table class="summary-table">

                                    <thead>

                                        <tr>

                                            <th>
                                                Product
                                            </th>

                                            <th>
                                                Subtotal
                                            </th>

                                        </tr>

                                    </thead>

                                    <tbody>

                                        <tr>

                                            <td>

                                                <div class="summary-product">

                                                    <img
                                                        src="{{ $mainImage }}"
                                                        alt="{{ $product->name }}"
                                                    >

                                                    <span class="summary-product-copy">

                                                        <span id="summaryProductName">

                                                            {{ $product->name }}

                                                            ×

                                                            1

                                                        </span>

                                                        @if(
                                                            $product->has_variants
                                                        )

                                                            <small id="lpSummaryVariant">

                                                                {{ optional(
                                                                    $defaultVariant
                                                                )->name }}

                                                            </small>

                                                        @else

                                                            <small id="lpSummaryVariant"></small>

                                                        @endif

                                                    </span>

                                                </div>

                                            </td>

                                            <td id="summaryProductSubtotal">

                                                {{ number_format(
                                                    $basePrice,
                                                    0
                                                ) }}৳

                                            </td>

                                        </tr>

                                        <tr>

                                            <td>
                                                Unit price
                                            </td>

                                            <td id="lpUnitPrice">

                                                {{ number_format(
                                                    $basePrice,
                                                    0
                                                ) }}৳

                                            </td>

                                        </tr>

                                        <tr>

                                            <td>
                                                Subtotal
                                            </td>

                                            <td id="lpSubtotal">

                                                {{ number_format(
                                                    $basePrice,
                                                    0
                                                ) }}৳

                                            </td>

                                        </tr>

                                        <tr>

                                            <td>
                                                Delivery
                                            </td>

                                            <td id="lpDeliveryCharge">
                                                Calculating...
                                            </td>

                                        </tr>

                                        <tr>

                                            <td>

                                                <strong>
                                                    Total
                                                </strong>

                                            </td>

                                            <td>

                                                <strong id="lpTotal">

                                                    {{ number_format(
                                                        $basePrice,
                                                        0
                                                    ) }}৳

                                                </strong>

                                            </td>

                                        </tr>

                                    </tbody>

                                </table>

                                <div class="payment-box">

                                    <h4>

                                        {{ data_get(
                                            $content,
                                            'payment_title',
                                            'ক্যাশ অন ডেলিভারি (COD)'
                                        ) }}

                                    </h4>

                                    <div class="payment-message">

                                        {{ data_get(
                                            $content,
                                            'payment_text',
                                            'পণ্য হাতে পাওয়ার পর মূল্য পরিশোধ করবেন।'
                                        ) }}

                                    </div>

                                </div>

                                <button
                                    type="submit"
                                    class="place-order"
                                    id="lpPlaceOrder"
                                    @disabled(
                                        $previewMode
                                    )
                                >

                                    <i class="fa-solid fa-lock"></i>

                                    <span>

                                        @if(
                                            $previewMode
                                        )
                                            Preview Mode
                                        @else

                                            {{ data_get(
                                                $content,
                                                'button_text',
                                                'অর্ডারটি প্লেস করুন'
                                            ) }}

                                        @endif

                                    </span>

                                    <span id="lpButtonTotal">

                                        {{ number_format(
                                            $basePrice,
                                            0
                                        ) }}৳

                                    </span>

                                </button>

                            </div>

                        </div>

                        <p class="form-disclaimer">

                            আপনার নাম, ফোন নাম্বার এবং পূর্ণ ঠিকানা
                            সঠিকভাবে লিখুন। পণ্য হাতে পাওয়ার পর
                            মূল্য পরিশোধ করবেন।

                        </p>

                    </form>

                </div>

            </div>

        </section>

    {{-- ================================================================
         FOOTER
    ================================================================= --}}

    @elseif(
        $section->type === 'footer'
    )

        @if(
            $landingPage->show_footer_products
            && $footerProducts->isNotEmpty()
        )

            <section class="footer-products pattern-bg">

                <div class="container">

                    <h2 class="footer-products-title">
                        আরও পণ্য
                    </h2>

                    <div class="footer-product-grid">

                        @foreach(
                            $footerProducts
                            as $footerProduct
                        )

                            <article class="footer-product-card">

                                <img
                                    src="{{ $footerProduct->image_url }}"
                                    alt="{{ $footerProduct->name }}"
                                    loading="lazy"
                                >

                                <div class="footer-product-body">

                                    <h3>
                                        {{ $footerProduct->name }}
                                    </h3>

                                    <strong>

                                        {{ number_format(
                                            $footerProduct->final_price,
                                            0
                                        ) }}৳

                                    </strong>

                                </div>

                            </article>

                        @endforeach

                    </div>

                </div>

            </section>

        @endif

        <footer class="footer">

            <h3>

                {{ data_get(
                    $content,
                    'heading',
                    'কোনো কিছু জানতে কিংবা সরাসরি অর্ডার করতে যোগাযোগ করুন'
                ) }}

            </h3>

            <div class="social-links">

                @if(
                    filled(
                        data_get(
                            $landingPage->settings,
                            'facebook_url'
                        )
                    )
                )

                    <a
                        href="{{ data_get(
                            $landingPage->settings,
                            'facebook_url'
                        ) }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        aria-label="Facebook"
                    >

                        <i class="fa-brands fa-facebook-f"></i>

                    </a>

                @endif

                @if(
                    filled($whatsapp)
                )

                    <a
                        href="https://wa.me/{{ $whatsapp }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        aria-label="WhatsApp"
                    >

                        <i class="fa-brands fa-whatsapp"></i>

                    </a>

                @endif

                @if(
                    filled($phone)
                )

                    <a
                        href="tel:+{{ $phone }}"
                        aria-label="Call"
                    >

                        <i class="fa-solid fa-phone"></i>

                    </a>

                @endif

            </div>

            <div class="copyright">

                {{ data_get(
                    $content,
                    'copyright',
                    '© 2026 All Rights Reserved by Nebuloid'
                ) }}

            </div>

        </footer>

    @endif

@endforeach

{{-- ==========================================================================
     Floating WhatsApp
============================================================================ --}}

@if(
    ! $previewMode
    && filled($whatsapp)
)

    <a
        class="whatsapp-button"
        href="https://wa.me/{{ $whatsapp }}"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Contact on WhatsApp"
    >

        <i class="fa-brands fa-whatsapp"></i>

    </a>

@endif

{{-- ==========================================================================
     Mobile Order
============================================================================ --}}

@if(
    ! $previewMode
    && optional(
        $orderSection
    )->is_enabled
)

    <a
        class="mobile-order-button"
        href="#order"
    >

        <i class="fa-solid fa-cart-shopping"></i>

        &nbsp;

        এখনই অর্ডার করুন

    </a>

@endif

{{-- ==========================================================================
     Toast
============================================================================ --}}

<div
    class="landing-toast"
    id="lpToast"
    hidden
></div>

{{-- ==========================================================================
     Success Modal
============================================================================ --}}

<div
    class="modal-overlay"
    id="lpSuccessModal"
    hidden
>

    <div class="success-modal">

        <div class="success-icon">

            <i class="fa-solid fa-check"></i>

        </div>

        <h3 id="lpSuccessTitle">
            অর্ডার গ্রহণ করা হয়েছে
        </h3>

        <p id="lpSuccessText">

            ধন্যবাদ। আপনার অর্ডার সফলভাবে
            গ্রহণ করা হয়েছে।

        </p>

        <div class="success-order-number">

            Order:

            <strong id="lpSuccessOrder">
                —
            </strong>

        </div>

        <div class="success-actions">

            <button
                type="button"
                class="modal-close"
                data-close-success
            >
                ঠিক আছে
            </button>

            <a
                href="#"
                class="invoice-button"
                id="lpInvoiceLink"
            >
                Invoice দেখুন
            </a>

        </div>

    </div>

</div>

{{-- ==========================================================================
     JavaScript Data
============================================================================ --}}

<script>
    window.LANDING_PAGE_DATA =
        {{ \Illuminate\Support\Js::from(
            $landingPageJsData
        ) }};
</script>

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js">
</script>

<script
    src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js">
</script>

<script>
(function () {

    "use strict";

    /*
    |--------------------------------------------------------------------------
    | Configuration
    |--------------------------------------------------------------------------
    */

    const config =
        window.LANDING_PAGE_DATA
        || {};

    /*
    |--------------------------------------------------------------------------
    | AOS
    |--------------------------------------------------------------------------
    */

    if (
        window.AOS
    ) {

        AOS.init({
            duration:
                850,

            once:
                true,

            offset:
                70,

            easing:
                "ease-out-cubic"
        });
    }

    /*
    |--------------------------------------------------------------------------
    | Review Slider
    |--------------------------------------------------------------------------
    */

    if (
        window.Swiper
        &&
        document.querySelector(
            ".review-swiper"
        )
    ) {

        new Swiper(
            ".review-swiper",
            {
                slidesPerView:
                    1,

                spaceBetween:
                    20,

                loop:
                    true,

                speed:
                    800,

                autoplay: {
                    delay:
                        3500,

                    disableOnInteraction:
                        false,

                    pauseOnMouseEnter:
                        true
                },

                pagination: {
                    el:
                        ".swiper-pagination",

                    clickable:
                        true
                },

                navigation: {
                    nextEl:
                        ".swiper-button-next",

                    prevEl:
                        ".swiper-button-prev"
                },

                breakpoints: {

                    680: {
                        slidesPerView:
                            2,

                        spaceBetween:
                            20
                    },

                    992: {
                        slidesPerView:
                            3,

                        spaceBetween:
                            22
                    }
                }
            }
        );
    }

    /*
    |--------------------------------------------------------------------------
    | Scroll To Order
    |--------------------------------------------------------------------------
    */

    document
        .querySelectorAll(
            ".scroll-order"
        )
        .forEach(
            function (button) {

                button.addEventListener(
                    "click",
                    function () {

                        document
                            .getElementById(
                                "order"
                            )
                            ?.scrollIntoView({
                                behavior:
                                    "smooth",

                                block:
                                    "start"
                            });
                    }
                );
            }
        );

    /*
    |--------------------------------------------------------------------------
    | Form
    |--------------------------------------------------------------------------
    */

    const form =
        document.getElementById(
            "lpOrderForm"
        );

    if (! form) {
        return;
    }

    const tokenInput =
        document.getElementById(
            "lpIncompleteToken"
        );

    const quantityInput =
        document.getElementById(
            "lpQuantityInput"
        );

    const quantityText =
        document.getElementById(
            "lpQtyText"
        );

    const minusButton =
        document.getElementById(
            "lpQtyMinus"
        );

    const plusButton =
        document.getElementById(
            "lpQtyPlus"
        );

    const variantSelect =
        document.getElementById(
            "lpVariantSelect"
        );

    const phoneInput =
        document.getElementById(
            "customerPhone"
        );

    const unitPriceElement =
        document.getElementById(
            "lpUnitPrice"
        );

    const subtotalElement =
        document.getElementById(
            "lpSubtotal"
        );

    const deliveryElement =
        document.getElementById(
            "lpDeliveryCharge"
        );

    const totalElement =
        document.getElementById(
            "lpTotal"
        );

    const buttonTotalElement =
        document.getElementById(
            "lpButtonTotal"
        );

    const topProductPrice =
        document.getElementById(
            "topProductPrice"
        );

    const topVariantName =
        document.getElementById(
            "topVariantName"
        );

    const summaryProductName =
        document.getElementById(
            "summaryProductName"
        );

    const summaryProductSubtotal =
        document.getElementById(
            "summaryProductSubtotal"
        );

    const summaryVariant =
        document.getElementById(
            "lpSummaryVariant"
        );

    const submitButton =
        document.getElementById(
            "lpPlaceOrder"
        );

    const toast =
        document.getElementById(
            "lpToast"
        );

    const successModal =
        document.getElementById(
            "lpSuccessModal"
        );

    let currentMaximum =
        Math.max(
            1,
            Number(
                config.maxQuantity
                || 100
            )
        );

    let quoteController =
        null;

    let autosaveController =
        null;

    let autosaveTimer =
        null;

    let orderCompleted =
        false;

    /*
    |--------------------------------------------------------------------------
    | Money
    |--------------------------------------------------------------------------
    */

    function money(
        amount
    ) {

        return (
            new Intl.NumberFormat(
                "en-BD",
                {
                    maximumFractionDigits:
                        0
                }
            ).format(
                Number(
                    amount
                    || 0
                )
            )
            + "৳"
        );
    }

    /*
    |--------------------------------------------------------------------------
    | Toast
    |--------------------------------------------------------------------------
    */

    function showToast(
        message,
        type = "success"
    ) {

        if (! toast) {
            return;
        }

        toast.textContent =
            String(
                message
                || ""
            );

        toast.classList.toggle(
            "error",
            type === "error"
        );

        toast.hidden =
            false;

        clearTimeout(
            showToast.timer
        );

        showToast.timer =
            setTimeout(
                function () {

                    toast.hidden =
                        true;

                },
                3300
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Errors
    |--------------------------------------------------------------------------
    */

    function clearErrors() {

        document
            .querySelectorAll(
                "[data-field-error]"
            )
            .forEach(
                function (element) {

                    element.textContent =
                        "";
                }
            );
    }

    function showErrors(
        errors
    ) {

        clearErrors();

        Object
            .entries(
                errors
                || {}
            )
            .forEach(
                function (
                    entry
                ) {

                    const field =
                        entry[0];

                    const messages =
                        entry[1];

                    const element =
                        document.querySelector(
                            `[data-field-error="${CSS.escape(field)}"]`
                        );

                    if (! element) {
                        return;
                    }

                    element.textContent =
                        Array.isArray(
                            messages
                        )
                            ? messages[0]
                            : String(
                                messages
                                || ""
                            );
                }
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Form Payload
    |--------------------------------------------------------------------------
    */

    function getPayload() {

        const formData =
            new FormData(
                form
            );

        const payload =
            Object.fromEntries(
                formData.entries()
            );

        payload.quantity =
            Math.max(
                1,
                Number(
                    payload.quantity
                    || 1
                )
            );

        payload.variant_id =
            payload.variant_id
            || null;

        payload.delivery_area =
            payload.delivery_area
            || null;

        return payload;
    }

    /*
    |--------------------------------------------------------------------------
    | AJAX
    |--------------------------------------------------------------------------
    */

    async function postJSON(
        url,
        data,
        signal
    ) {

        const response =
            await fetch(
                url,
                {
                    method:
                        "POST",

                    headers: {

                        "Content-Type":
                            "application/json",

                        "Accept":
                            "application/json",

                        "X-Requested-With":
                            "XMLHttpRequest",

                        "X-CSRF-TOKEN":
                            config.csrf
                            || ""
                    },

                    body:
                        JSON.stringify(
                            data
                        ),

                    signal:
                        signal
                        || undefined
                }
            );

        let body =
            {};

        try {

            body =
                await response.json();

        } catch (error) {

            body =
                {};
        }

        if (
            ! response.ok
        ) {

            const requestError =
                new Error(
                    body.message
                    || "Request failed."
                );

            requestError.status =
                response.status;

            requestError.data =
                body;

            throw requestError;
        }

        return body;
    }

    /*
    |--------------------------------------------------------------------------
    | Token
    |--------------------------------------------------------------------------
    */

    function tokenStorageKey() {

        return (
            "landing-page-checkout-token:"
            + String(
                config.pageId
            )
        );
    }

    function makeUUID() {

        if (
            window.crypto
            &&
            typeof window.crypto.randomUUID
                === "function"
        ) {

            return window.crypto.randomUUID();
        }

        return (
            Date.now().toString(36)
            + "-"
            + Math.random()
                .toString(36)
                .slice(2)
            + "-"
            + Math.random()
                .toString(36)
                .slice(2)
        );
    }

    function ensureToken() {

        let token =
            "";

        try {

            token =
                localStorage.getItem(
                    tokenStorageKey()
                )
                || "";

        } catch (error) {
            token =
                "";
        }

        if (! token) {

            token =
                makeUUID();
        }

        try {

            localStorage.setItem(
                tokenStorageKey(),
                token
            );

        } catch (error) {
        }

        if (
            tokenInput
        ) {

            tokenInput.value =
                token;
        }

        return token;
    }

    function rememberToken(
        token
    ) {

        if (! token) {
            return;
        }

        if (
            tokenInput
        ) {

            tokenInput.value =
                token;
        }

        try {

            localStorage.setItem(
                tokenStorageKey(),
                token
            );

        } catch (error) {
        }
    }

    function removeToken() {

        try {

            localStorage.removeItem(
                tokenStorageKey()
            );

        } catch (error) {
        }

        if (
            tokenInput
        ) {

            tokenInput.value =
                "";
        }
    }

    /*
    |--------------------------------------------------------------------------
    | Apply Quote
    |--------------------------------------------------------------------------
    */

    function applyQuote(
        quote
    ) {

        if (! quote) {
            return;
        }

        currentMaximum =
            Math.max(
                1,
                Number(
                    quote.max_quantity
                    || 100
                )
            );

        const quantity =
            Math.min(
                currentMaximum,
                Math.max(
                    1,
                    Number(
                        quote.quantity
                        || 1
                    )
                )
            );

        quantityInput.value =
            String(
                quantity
            );

        if (
            quantityText
        ) {

            quantityText.textContent =
                String(
                    quantity
                );
        }

        if (
            unitPriceElement
        ) {

            unitPriceElement.textContent =
                money(
                    quote.unit_price
                );
        }

        if (
            subtotalElement
        ) {

            subtotalElement.textContent =
                money(
                    quote.subtotal
                );
        }

        if (
            summaryProductSubtotal
        ) {

            summaryProductSubtotal.textContent =
                money(
                    quote.subtotal
                );
        }

        if (
            deliveryElement
        ) {

            deliveryElement.textContent =
                quote.delivery_area
                    ? money(
                        quote.delivery_charge
                    )
                    : "Select area";
        }

        if (
            totalElement
        ) {

            totalElement.textContent =
                money(
                    quote.total
                );
        }

        if (
            buttonTotalElement
        ) {

            buttonTotalElement.textContent =
                money(
                    quote.total
                );
        }

        if (
            topProductPrice
        ) {

            topProductPrice.textContent =
                money(
                    quote.unit_price
                );
        }

        if (
            summaryVariant
        ) {

            summaryVariant.textContent =
                quote.variant_name
                || "";
        }

        if (
            topVariantName
        ) {

            topVariantName.textContent =
                quote.variant_name
                || "";
        }

        if (
            summaryProductName
        ) {

            summaryProductName.textContent =
                String(
                    config.productName
                    || "Product"
                )
                + " × "
                + quantity;
        }

        if (
            quote.delivery_area
        ) {

            const priceElement =
                document.querySelector(
                    `[data-area-price="${CSS.escape(
                        String(
                            quote.delivery_area
                        )
                    )}"]`
                );

            if (
                priceElement
            ) {

                priceElement.textContent =
                    money(
                        quote.delivery_charge
                    );
            }
        }
    }

    /*
    |--------------------------------------------------------------------------
    | Refresh Quote
    |--------------------------------------------------------------------------
    */

    async function refreshQuote() {

        if (
            config.preview
        ) {
            return;
        }

        if (
            quoteController
        ) {

            quoteController.abort();
        }

        quoteController =
            new AbortController();

        const payload =
            getPayload();

        try {

            const response =
                await postJSON(
                    config.quoteUrl,
                    payload,
                    quoteController.signal
                );

            applyQuote(
                response.quote
            );

            clearErrors();

        } catch (error) {

            if (
                error.name
                === "AbortError"
            ) {
                return;
            }

            if (
                error.status
                === 422
            ) {

                showErrors(
                    error.data?.errors
                    || {}
                );

                return;
            }

            showToast(
                error.message,
                "error"
            );
        }
    }

    /*
    |--------------------------------------------------------------------------
    | Incomplete Order Save
    |--------------------------------------------------------------------------
    */

    async function saveIncomplete() {

        if (
            config.preview
            || orderCompleted
        ) {
            return;
        }

        if (
            autosaveController
        ) {

            autosaveController.abort();
        }

        const controller =
            new AbortController();

        autosaveController =
            controller;

        const payload =
            getPayload();

        payload.token =
            ensureToken();

        try {

            const response =
                await postJSON(
                    config.incompleteUrl,
                    payload,
                    controller.signal
                );

            if (
                orderCompleted
            ) {
                return;
            }

            if (
                response?.draft?.token
            ) {

                rememberToken(
                    response.draft.token
                );
            }

        } catch (error) {

            if (
                error.name
                === "AbortError"
            ) {
                return;
            }

            /*
             * Autosave silently fails.
             * Final submit will display errors.
             */
        } finally {

            if (
                autosaveController
                === controller
            ) {

                autosaveController =
                    null;
            }
        }
    }

    function scheduleAutosave(
        delay = 650
    ) {

        if (
            config.preview
            || orderCompleted
        ) {
            return;
        }

        clearTimeout(
            autosaveTimer
        );

        autosaveTimer =
            setTimeout(
                saveIncomplete,
                delay
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Quantity
    |--------------------------------------------------------------------------
    */

    function setQuantity(
        quantity
    ) {

        const finalQuantity =
            Math.max(
                1,
                Math.min(
                    currentMaximum,
                    Number(
                        quantity
                        || 1
                    )
                )
            );

        quantityInput.value =
            String(
                finalQuantity
            );

        if (
            quantityText
        ) {

            quantityText.textContent =
                String(
                    finalQuantity
                );
        }

        refreshQuote();

        scheduleAutosave();
    }

    minusButton?.addEventListener(
        "click",
        function () {

            setQuantity(
                Number(
                    quantityInput.value
                    || 1
                )
                - 1
            );
        }
    );

    plusButton?.addEventListener(
        "click",
        function () {

            setQuantity(
                Number(
                    quantityInput.value
                    || 1
                )
                + 1
            );
        }
    );

    /*
    |--------------------------------------------------------------------------
    | Variant
    |--------------------------------------------------------------------------
    */

    variantSelect?.addEventListener(
        "change",
        function () {

            const selectedVariant =
                Array.isArray(
                    config.variants
                )
                    ? config.variants.find(
                        function (variant) {

                            return (
                                String(
                                    variant.id
                                )
                                ===
                                String(
                                    variantSelect.value
                                )
                            );
                        }
                    )
                    : null;

            if (
                selectedVariant
            ) {

                currentMaximum =
                    Math.max(
                        1,
                        Number(
                            selectedVariant.max_quantity
                            || 100
                        )
                    );
            }

            setQuantity(
                Math.min(
                    Number(
                        quantityInput.value
                        || 1
                    ),
                    currentMaximum
                )
            );
        }
    );

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

    form
        .querySelectorAll(
            'input[name="delivery_area"]'
        )
        .forEach(
            function (radio) {

                radio.addEventListener(
                    "change",
                    function () {

                        refreshQuote();

                        scheduleAutosave();
                    }
                );
            }
        );

    /*
    |--------------------------------------------------------------------------
    | Phone
    |--------------------------------------------------------------------------
    */

    phoneInput?.addEventListener(
        "input",
        function () {

            phoneInput.value =
                phoneInput.value
                    .replace(
                        /\D/g,
                        ""
                    )
                    .slice(
                        0,
                        11
                    );

            refreshQuote();

            scheduleAutosave();
        }
    );

    /*
    |--------------------------------------------------------------------------
    | Other Inputs
    |--------------------------------------------------------------------------
    */

    form
        .querySelectorAll(
            'input:not([type="radio"]), textarea, select'
        )
        .forEach(
            function (element) {

                if (
                    element === phoneInput
                    ||
                    element === variantSelect
                    ||
                    element === quantityInput
                    ||
                    element === tokenInput
                ) {
                    return;
                }

                element.addEventListener(
                    "input",
                    function () {

                        scheduleAutosave();
                    }
                );

                element.addEventListener(
                    "change",
                    function () {

                        scheduleAutosave();
                    }
                );
            }
        );

    /*
    |--------------------------------------------------------------------------
    | Final Place Order
    |--------------------------------------------------------------------------
    */

    form.addEventListener(
        "submit",
        async function (
            event
        ) {

            event.preventDefault();

            if (
                config.preview
            ) {
                return;
            }

            clearErrors();

            clearTimeout(
                autosaveTimer
            );

            if (
                autosaveController
            ) {

                autosaveController.abort();

                autosaveController =
                    null;
            }

            const selectedDelivery =
                form.querySelector(
                    'input[name="delivery_area"]:checked'
                );

            if (
                ! selectedDelivery
            ) {

                showErrors({
                    delivery_area: [
                        "ডেলিভারি এলাকা নির্বাচন করুন।"
                    ]
                });

                document
                    .getElementById(
                        "lpDeliveryGrid"
                    )
                    ?.scrollIntoView({
                        behavior:
                            "smooth",

                        block:
                            "center"
                    });

                return;
            }

            const payload =
                getPayload();

            payload.token =
                ensureToken();

            if (
                submitButton
            ) {

                submitButton.disabled =
                    true;

                submitButton.classList.add(
                    "is-loading"
                );
            }

            try {

                const response =
                    await postJSON(
                        config.orderUrl,
                        payload
                    );

                orderCompleted =
                    true;

                removeToken();

                const successTitle =
                    document.getElementById(
                        "lpSuccessTitle"
                    );

                const successText =
                    document.getElementById(
                        "lpSuccessText"
                    );

                const successOrder =
                    document.getElementById(
                        "lpSuccessOrder"
                    );

                const invoiceLink =
                    document.getElementById(
                        "lpInvoiceLink"
                    );

                if (
                    successTitle
                ) {

                    successTitle.textContent =
                        config.successTitle
                        || "অর্ডার গ্রহণ করা হয়েছে";
                }

                if (
                    successText
                ) {

                    successText.textContent =
                        config.successText
                        || response.message
                        || "ধন্যবাদ। আপনার অর্ডার সফলভাবে গ্রহণ করা হয়েছে।";
                }

                if (
                    successOrder
                ) {

                    successOrder.textContent =
                        response.order_number
                        || "";
                }

                if (
                    invoiceLink
                ) {

                    invoiceLink.href =
                        response.redirect_url
                        || "#";
                }

                if (
                    successModal
                ) {

                    successModal.hidden =
                        false;

                    document.body.classList.add(
                        "modal-open"
                    );
                }

            } catch (error) {

                if (
                    error.status
                    === 422
                ) {

                    const errors =
                        error.data?.errors
                        || {};

                    showErrors(
                        errors
                    );

                    const firstError =
                        Object.values(
                            errors
                        )[0];

                    showToast(
                        Array.isArray(
                            firstError
                        )
                            ? firstError[0]
                            : firstError
                                || "তথ্যগুলো যাচাই করুন।",
                        "error"
                    );

                } else {

                    showToast(
                        error.message,
                        "error"
                    );
                }

            } finally {

                if (
                    submitButton
                ) {

                    submitButton.disabled =
                        false;

                    submitButton.classList.remove(
                        "is-loading"
                    );
                }
            }
        }
    );

    /*
    |--------------------------------------------------------------------------
    | Modal Close
    |--------------------------------------------------------------------------
    */

    function closeSuccessModal() {

        if (
            successModal
        ) {

            successModal.hidden =
                true;
        }

        document.body.classList.remove(
            "modal-open"
        );
    }

    document
        .querySelectorAll(
            "[data-close-success]"
        )
        .forEach(
            function (button) {

                button.addEventListener(
                    "click",
                    closeSuccessModal
                );
            }
        );

    successModal?.addEventListener(
        "click",
        function (event) {

            if (
                event.target
                === successModal
            ) {

                closeSuccessModal();
            }
        }
    );

    /*
    |--------------------------------------------------------------------------
    | Initial Load
    |--------------------------------------------------------------------------
    |
    | IMPORTANT:
    |
    | Landing page open হওয়ার সাথে সাথে:
    |
    | 1. browser token তৈরি হবে
    | 2. server quote calculate হবে
    | 3. 250ms পরে incomplete order save হবে
    |
    | Customer Place Order না করলেও existing orders +
    | order_items table-এ incomplete order থাকবে।
    |
    */

    ensureToken();

    refreshQuote();

    scheduleAutosave(
        250
    );

})();
</script>

</body>

</html>