?php

namespace App\Filament\Admin\Resources;

use App\Filament\Admin\Resources\ProductResource\Pages;
use App\Filament\Admin\Resources\ProductResource\RelationManagers\CategoriesRelationManager;
use App\Services\SeoGeneratorService;
use App\Models\Product;
use App\Models\Format;
use App\Models\Color;
use App\Models\Occasion;
use App\Models\Flower;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Filament\Tables\Columns\ToggleColumn;
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Filters\SelectFilter;
use Illuminate\Support\Str;
use Filament\Notifications\Notification;
use App\Services\ImageProcessor;
use Illuminate\Support\Facades\Storage;
use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;
use Filament\Forms\Components\Hidden;
use Filament\Forms\Components\Actions;
use Filament\Forms\Components\Actions\Action;

class ProductResource extends Resource
{
    protected static ?string $model = Product::class;

    protected static ?string $navigationIcon = 'heroicon-o-shopping-bag';
    protected static ?string $navigationGroup = 'Управление товарами';
    protected static ?int $navigationSort = 1;
    protected static ?string $modelLabel = 'Товар';
    protected static ?string $pluralModelLabel = 'Товары';

    public static function form(Form $form): Form
    {
        return $form->schema([
            Forms\Components\Section::make('Основная информация')
                ->schema([
                    Forms\Components\TextInput::make('name')
                        ->required()
                        ->maxLength(255)
                        ->live(onBlur: true)
                        ->afterStateUpdated(function (callable $set, $state) {
                            $set('slug', Str::slug($state));
                        })
                        ->label('Название товара'),

                    Forms\Components\TextInput::make('slug')
                        ->required()
                        ->maxLength(255)
                        ->unique(ignoreRecord: true)
                        ->label('URL-адрес'),

                    Forms\Components\Textarea::make('description')
                        ->columnSpanFull()
                        ->label('Описание'),

                    Forms\Components\FileUpload::make('main_image_upload')
                        ->label('Главное изображение')
                        ->disk('public')
                        ->directory('tmp')
                        ->image()
                        ->required(fn ($livewire) => $livewire instanceof \Filament\Resources\Pages\CreateRecord)
                        ->columnSpanFull()
                        ->preserveFilenames()
                        ->imageEditor()
                        ->openable()
                        ->downloadable()
                        ->afterStateUpdated(function ($state, callable $set) {
                            if (!$state) {
                                $set('main_image_webp', null);
                                $set('main_image', null);
                                $set('main_image_webp_medium', null);
                                $set('main_image_jpg_medium', null);
                                $set('main_image_webp_small', null);
                                $set('main_image_jpg_small', null);
                                return;
                            }

                            try {
                                $tempPath = $state->storeAs('tmp', $state->getClientOriginalName(), 'public');
                                $fullPath = storage_path('app/public/' . $tempPath);
                                $paths = ImageProcessor::processFromPath($fullPath, 'products/main', true);

                                $set('main_image_webp', $paths['webp'] ?? null);
                                $set('main_image', $paths['jpg'] ?? null);
                                $set('main_image_webp_medium', $paths['webp_medium'] ?? null);
                                $set('main_image_jpg_medium', $paths['jpg_medium'] ?? null);
                                $set('main_image_webp_small', $paths['webp_small'] ?? null);
                                $set('main_image_jpg_small', $paths['jpg_small'] ?? null);

                                Storage::disk('public')->delete($tempPath);
                            } catch (\Throwable $e) {
                                \Log::error('Ошибка при обработке изображения: ' . $e->getMessage());
                                Notification::make()
                                    ->title('Ошибка при обработке изображения')
                                    ->body($e->getMessage())
                                    ->danger()
                                    ->send();
                            }
                        })
                        ->dehydrated(false)
                        ->dehydrateStateUsing(fn ($state) => null),

                    Forms\Components\ViewField::make('current_main_image')
                        ->label('Текущее изображение')
                        ->view('filament.components.product-image-preview')
                        ->hidden(fn ($record) => !$record?->main_image)
                        ->columnSpanFull()
                        ->extraAttributes([
                            'x-data' => "{
                                confirmDelete() {
                                    if (confirm('Вы уверены, что хотите удалить главное изображение?')) {
                                        \$wire.dispatch('delete-main-image');
                                    }
                                }
                            }",
                            'x-on:delete-main-image.window' => "confirmDelete()",
                        ]),

                    Forms\Components\ViewField::make('current_gallery')
                        ->label('Текущие изображения галереи')
                        ->view('filament.components.product-gallery-preview')
                        ->hidden(fn ($record) => empty($record?->gallery))
                        ->columnSpanFull()
                        ->extraAttributes([
                            'x-data' => "{
                                confirmDelete(index) {
                                    if (confirm('Вы уверены, что хотите удалить это изображение из галереи?')) {
                                        \$wire.dispatch('delete-gallery-image', { index: index });
                                    }
                                }
                            }",
                            'x-on:delete-gallery-image.window' => 'confirmDelete($event.detail.index)',
                        ]),

                    Hidden::make('main_image_webp'),
                    Hidden::make('main_image'),
                    Hidden::make('main_image_webp_medium'),
                    Hidden::make('main_image_jpg_medium'),
                    Hidden::make('main_image_webp_small'),
                    Hidden::make('main_image_jpg_small'),

                    // Новое поле для загрузки видео
                    Forms\Components\FileUpload::make('video_file')
                        ->label('Видеофайл (mp4, webm)')
                        ->disk('public')
                        ->directory('products/video')
                        ->acceptedFileTypes(['video/mp4', 'video/webm'])
                        ->maxSize(102400) // 100 MB
                        ->visibility('public')
                        ->nullable(),

                    Forms\Components\TextInput::make('video_url')
                        ->label('Ссылка на видео (YouTube/Vimeo)')
                        ->url()
                        ->nullable(),

                    Forms\Components\Toggle::make('is_active')
                        ->label('Активен')
                        ->default(true),

                    Forms\Components\Toggle::make('is_bestseller')
                        ->label('Хит продаж')
                        ->default(false),
                ])
                ->columns(['md' => 2, 'lg' => 3]),

            Forms\Components\Section::make('Галерея изображений')
                ->schema([
                    Forms\Components\FileUpload::make('gallery_upload')
                        ->label('Галерея изображений')
                        ->disk('public')
                        ->directory('tmp')
                        ->image()
                        ->multiple()
                        ->reorderable()
                        ->appendFiles()
                        ->preserveFilenames()
                        ->imageEditor()
                        ->openable()
                        ->downloadable()
                        ->columnSpanFull()
                        ->afterStateUpdated(function (callable $get, callable $set, $state) {
                            $gallery = $get('gallery') ?? [];

                            if (!$state) {
                                $set('gallery', []);
                                return;
                            }

                            $newImages = [];
                            foreach ($state as $file) {
                                if ($file instanceof TemporaryUploadedFile) {
                                    try {
                                        $tempPath = $file->storeAs('tmp', $file->getClientOriginalName(), 'public');
                                        $fullPath = storage_path('app/public/' . $tempPath);
                                        $paths = ImageProcessor::processFromPath($fullPath, 'products/gallery', false);

                                        $newImages[] = [
                                            'webp' => $paths['webp'] ?? null,
                                            'jpg' => $paths['jpg'] ?? null
                                        ];

                                        Storage::disk('public')->delete($tempPath);
                                    } catch (\Throwable $e) {
                                        \Log::error('Ошибка при обработке изображения галереи: ' . $e->getMessage());
                                        Notification::make()
                                            ->title('Ошибка при обработке изображения галереи')
                                            ->body($e->getMessage())
                                            ->danger()
                                            ->send();
                                    }
                                }
                            }

                            $set('gallery', array_merge($gallery, $newImages));
                        })
                        ->dehydrated(false)
                        ->dehydrateStateUsing(fn ($state) => null),

                    Hidden::make('gallery'),
                ]),

            Forms\Components\Section::make('Цены и наличие')
                ->schema([
                    Forms\Components\TextInput::make('price')
                        ->required()
                        ->numeric()
                        ->prefix('₽')
                        ->label('Цена'),

                    Forms\Components\TextInput::make('old_price')
                        ->numeric()
                        ->prefix('₽')
                        ->label('Старая цена (если есть скидка)'),

                    Forms\Components\Toggle::make('in_stock')
                        ->required()
                        ->label('В наличии')
                        ->default(true),

                    Forms\Components\TextInput::make('stock_count')
                        ->numeric()
                        ->label('Количество на складе')
                        ->helperText('Оставьте 0 для бесконечного количества')
                        ->default(0),
                ])
                ->columns(['md' => 2]),

            Forms\Components\Section::make('Характеристики')
                ->schema([
                    Forms\Components\TextInput::make('height_cm')
                        ->required()
                        ->numeric()
                        ->suffix('см')
                        ->label('Высота'),

                    Forms\Components\TextInput::make('width_cm')
                        ->required()
                        ->numeric()
                        ->suffix('см')
                        ->label('Ширина'),

                    Forms\Components\Select::make('format_id')
                        ->label('Формат')
                        ->relationship('format', 'name')
                        ->required()
                        ->searchable()
                        ->preload(),

                    Forms\Components\Select::make('colors')
                        ->label('Цвета')
                        ->relationship('colors', 'name')
                        ->multiple()
                        ->searchable()
                        ->preload()
                        ->columnSpanFull(),

                    Forms\Components\Repeater::make('flower_product_composition')
                        ->relationship('flowerProductComposition')
                        ->schema([
                            Forms\Components\Select::make('flower_id')
                                ->label('Цветок')
                                ->options(fn () => Flower::pluck('name', 'id'))
                                ->required()
                                ->searchable(),

                            Forms\Components\TextInput::make('count')
                                ->label('Количество')
                                ->numeric()
                                ->required()
                                ->default(1),
                        ])
                        ->columns(['md' => 2])
                        ->collapsible()
                        ->label('Состав букета'),

                    Forms\Components\Select::make('occasions')
                        ->label('Поводы')
                        ->relationship('occasions', 'name')
                        ->multiple()
                        ->searchable()
                        ->preload()
                        ->columnSpanFull(),
                ])
                ->columns(['md' => 2]),

            Forms\Components\Section::make('SEO настройки')
                ->schema([
                    Forms\Components\TextInput::make('seo_title')
                        ->maxLength(60)
                        ->label('SEO Title')
                        ->helperText('Максимум 60 символов'),

                    Forms\Components\Textarea::make('seo_description')
                        ->maxLength(160)
                        ->label('SEO Description')
                        ->helperText('Максимум 160 символов'),

                    Forms\Components\TextInput::make('seo_keywords')
                        ->label('SEO Keywords')
                        ->helperText('Через запятую'),

                    Actions::make([
                        Action::make('generate_seo')
                            ->label('Сгенерировать SEO автоматически')
                            ->color('success')
                            ->icon('heroicon-o-sparkles')
                            ->action(function (callable $set, callable $get) {
                                $name = $get('name');
                                if (empty($name)) {
                                    Notification::make()
                                        ->title('Сначала заполните название товара')
                                        ->danger()
                                        ->send();
                                    return;
                                }

                                self::generateSeoFields($set, $get, $name);

                                Notification::make()
                                    ->title('SEO успешно сгенерировано')
                                    ->success()
                                    ->send();
                            }),
                    ]),
                ])
                ->columns(['md' => 2]),
        ]);
    }

    private static function generateSeoFields(callable $set, callable $get, string $productName): void
    {
        $composition = $get('flower_product_composition') ?? [];
        $occasionIds = $get('occasions') ?? [];
        $colorIds = $get('colors') ?? [];
        $format = $get('format_id');
        $width = $get('width_cm') ?? '';
        $height = $get('height_cm') ?? '';
        $price = $get('price') ?? '';

        $occasionNames = [];
        if (!empty($occasionIds)) {
            $occasionNames = is_array($occasionIds)
                ? Occasion::whereIn('id', $occasionIds)->pluck('name')->toArray()
                : [Occasion::find($occasionIds)?->name];
        }

        $colorNames = [];
        if (is_array($colorIds)) {
            $colorNames = Color::whereIn('id', $colorIds)->pluck('name')->toArray();
        } elseif (!empty($colorIds)) {
            $colorNames[] = Color::find($colorIds)?->name;
        }

        $seoData = SeoGeneratorService::generate([
            'name' => $productName,
            'composition' => $composition,
            'occasion' => $occasionNames,
            'color' => implode(', ', $colorNames),
            'format' => $format,
            'width_cm' => $width,
            'height_cm' => $height,
            'price' => $price,
        ]);

        $set('seo_title', $seoData['seo_title'] ?? '');
        $set('seo_description', $seoData['seo_description'] ?? '');
        $set('seo_keywords', $seoData['seo_keywords'] ?? '');
        $set('description', $seoData['description'] ?? '');
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\ImageColumn::make('main_image_jpg_small')
                    ->label('Фото')
                    ->disk('public')
                    ->rounded()
                    ->height(80)
                    ->width(80)
                    ->defaultImageUrl(function ($record) {
                        if ($record->main_image_jpg_medium && Storage::disk('public')->exists($record->main_image_jpg_medium)) {
                            return Storage::disk('public')->url($record->main_image_jpg_medium);
                        }
                        if ($record->main_image && Storage::disk('public')->exists($record->main_image)) {
                            return Storage::disk('public')->url($record->main_image);
                        }
                        return null;
                    }),

                Tables\Columns\TextColumn::make('name')
                    ->label('Название')
                    ->searchable()
                    ->sortable()
                    ->wrap(),

                // НОВАЯ КОЛОНКА ИНДИКАТОРА СОСТАВА
                IconColumn::make('has_composition')
                    ->label('Состав')
                    ->boolean()
                    ->getStateUsing(fn ($record) => $record->flowers()->exists()) // Проверяет, есть ли привязанные цветы
                    ->trueIcon('heroicon-o-check-circle') // Иконка, если состав есть
                    ->falseIcon('heroicon-o-x-circle') // Иконка, если состава нет
                    ->trueColor('success') // Зеленый цвет
                    ->falseColor('danger') // Красный цвет
                    ->sortable(query: function ($query, string $direction) {
                        return $query->withCount('flowers')->orderBy('flowers_count', $direction);
                    }),

                Tables\Columns\TextColumn::make('price')
                    ->label('Цена')
                    ->sortable(),

                ToggleColumn::make('in_stock')
                    ->label('В наличии')
                    ->sortable(),

                ToggleColumn::make('is_active')
                    ->label('Активен')
                    ->sortable(),

                Tables\Columns\TextColumn::make('created_at')
                    ->label('Создан')
                    ->dateTime()
                    ->sortable()
                    ->toggleable(isToggledHiddenByDefault: true),
            ])
            ->filters([
                SelectFilter::make('in_stock')
                    ->label('Наличие')
                    ->options([
                        true => 'В наличии',
                        false => 'Нет в наличии',
                    ]),
                SelectFilter::make('is_active')
                    ->label('Активность')
                    ->options([
                        true => 'Активен',
                        false => 'Неактивен',
                    ]),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                    Tables\Actions\BulkAction::make('setInStock')
                        ->label('Отметить "В наличии"')
                        ->icon('heroicon-o-check-circle')
                        ->action(function ($records) {
                            foreach ($records as $record) {
                                $record->update(['in_stock' => true]);
                            }
                        })
                        ->deselectRecordsAfterCompletion(),
                    Tables\Actions\BulkAction::make('setOutOfStock')
                        ->label('Отметить "Нет в наличии"')
                        ->icon('heroicon-o-x-circle')
                        ->action(function ($records) {
                            foreach ($records as $record) {
                                $record->update(['in_stock' => false]);
                            }
                        })
                        ->deselectRecordsAfterCompletion(),
                    Tables\Actions\BulkAction::make('activate')
                        ->label('Активировать')
                        ->icon('heroicon-o-check')
                        ->action(function ($records) {
                            foreach ($records as $record) {
                                $record->update(['is_active' => true]);
                            }
                        })
                        ->deselectRecordsAfterCompletion(),
                    Tables\Actions\BulkAction::make('deactivate')
                        ->label('Деактивировать')
                        ->icon('heroicon-o-x-mark')
                        ->action(function ($records) {
                            foreach ($records as $record) {
                                $record->update(['is_active' => false]);
                            }
                        })
                        ->deselectRecordsAfterCompletion(),
                ]),
            ])
            ->defaultSort('created_at', 'desc');
    }

    public static function getRelations(): array
    {
        return [
            CategoriesRelationManager::class,
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => \App\Filament\Admin\Resources\Pages\ListProducts::route('/'),
            'create' => \App\Filament\Admin\Resources\Pages\CreateProduct::route('/create'),
            'edit' => \App\Filament\Admin\Resources\Pages\EditProduct::route('/{record}/edit'),
        ];
    }
}<script type="application/ld+json">{"@context":"https://schema.org","@type":"Product","name":"Букет из 7 белых роз","image":["https://yaratflo.ru/storage/products/main/zhk6cai2p5yosvm6axvuml3piaaw22xp4q0b0zdt-gwrdmflb-1nsey81q-qXH9eMuN.jpg"],"description":"Букет из 7 белых роз — это большой и красивый букет, который станет идеальным подарком на День матери, День рождения, День учителя или 1 сентября. Розы отличаются нежным и благородным цветом, который символизирует чистоту и искренность чувств. Доставка по Казани. Доставка по Казани от 60 минут. Бесплатно при заказе от 3500 ₽.","sku":"441","brand":{"@type":"Brand","name":"ЯРАТ"},"offers":{"@type":"Offer","url":"https://yaratflo.ru/product/buket-iz-7-belyx-roz","priceCurrency":"RUB","price":3280,"priceValidUntil":"2027-01-10","availability":"https://schema.org/InStock","itemCondition":"https://schema.org/NewCondition","seller":{"@id":"https://yaratflo.ru/#organization"},"shippingDetails":{"@type":"OfferShippingDetails","shippingRate":{"@type":"MonetaryAmount","value":450,"currency":"RUB"},"shippingDestination":{"@type":"DefinedRegion","addressCountry":"RU","addressRegion":"Татарстан","addressLocality":"Казань"},"deliveryTime":{"@type":"ShippingDeliveryTime","handlingTime":{"@type":"QuantitativeValue","minValue":0,"maxValue":0,"unitCode":"HUR"},"transitTime":{"@type":"QuantitativeValue","minValue":1,"maxValue":2,"unitCode":"HUR"}}},"hasMerchantReturnPolicy":{"@type":"MerchantReturnPolicy","applicableCountry":"RU","returnPolicyCategory":"https://schema.org/MerchantReturnNotPermitted"}}}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Главная","item":"https://yaratflo.ru"},{"@type":"ListItem","position":2,"name":"Каталог","item":"https://yaratflo.ru/catalog"},{"@type":"ListItem","position":3,"name":"Букет из 7 белых роз"}]}</script>


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Букет из 7 белых роз, доставка по Казани (Арт. 441)</title>
    <meta name="description" content="Большой букет из 7 белых роз. Доставим по Казани. Идеальный подарок на День матери, День рождения, День учителя, 1 сентября. Артикул 441. Быстрая доставка по Казани.">

    <script>
        window.dataLayer = window.dataLayer || [];
    </script>

    <!-- Яндекс Метрика (Грузится сразу и всегда) -->
    <script type="text/javascript" >
       (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
       m[i].l=1*new Date();
       for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
       k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

       ym(107039955, "init", {
            clickmap:true,
            trackLinks:true,
            accurateTrackBounce:true,
            webvisor:true,
            ecommerce:"dataLayer"
       });
    </script>
    <noscript><div><img src="https://mc.yandex.ru/watch/107039955" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

            <link rel="canonical" href="https://yaratflo.ru/product/buket-iz-7-belyx-roz" />
    
    <meta name="keywords" content="цветы Казань, доставка цветов, букеты Казань, интернет-магазин цветов, свежие цветы">
    <meta name="author" content="ЯРАТ">
    <meta name="csrf-token" content="gyT1r3A7xOfkwH154pbbpFXiSU0y3gN8Nkz9TgLV">

    
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "ЯРАТ",
    "alternateName": "ЯРАТ Цветы",
    "image": "https://yaratflo.ru/images/logo.png",
    "logo": "https://yaratflo.ru/images/logo.png",
    "@id": "https://yaratflo.ru/#organization",
    "url": "https://yaratflo.ru",
    "telephone": "+79053130549",
    "email": "x.dilya@yandex.ru",
    "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+79053130549",
        "contactType": "customer service",
        "areaServed": "RU",
        "availableLanguage": ["Russian"]
    },
    "priceRange": "1000-15000 RUB",
    "address": {
        "@type": "PostalAddress",
        "streetAddress": "ул. Кариева, 4а",
        "postalCode": "420111",
        "addressLocality": "Казань",
        "addressCountry": "RU"
    },
    "geo": {
        "@type": "GeoCoordinates",
        "latitude": 55.744889,
        "longitude": 49.203168
    },
    "openingHoursSpecification": [{
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
        "opens": "08:00",
        "closes": "22:00"
    }],
    "sameAs": [
        "https://t.me/florencia_kazan",
        "https://api.whatsapp.com/send?phone=79053130549"
    ]
}
</script>
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "ЯРАТ Цветы",
    "url": "https://yaratflo.ru",
    "potentialAction": {
        "@type": "SearchAction",
        "target": {
            "@type": "EntryPoint",
            "urlTemplate": "https://yaratflo.ru/search?query={search_term_string}"
        },
        "query-input": "required name=search_term_string"
    }
}
</script>


    <link rel="icon" type="image/x-icon" href="https://yaratflo.ru/favicon.ico">

    <link rel="preconnect" href="https://mc.yandex.ru" crossorigin>
    <link rel="dns-prefetch" href="https://yaratflo.ru">
    <link rel="preload" as="image" href="https://yaratflo.ru/images/logo.webp" type="image/webp">

    <script defer src="https://yaratflo.ru/js/alpine.min.js"></script>

                                <link rel="stylesheet" href="https://yaratflo.ru/build/assets/app-CFajZmgw.css">
                            <script type="module" src="https://yaratflo.ru/build/assets/app-BdyJCCfu.js"></script>
            
    <style>
        .header-container { max-width: 100%; overflow-x: hidden; }
        .logo-img { max-height: 40px; width: auto; object-fit: contain; }
        .footer-logo-img { max-height: 35px; width: auto; object-fit: contain; }
        [x-cloak] { display: none !important; }

        .mobile-menu-overlay {
            position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 50; transition: opacity 0.3s ease;
        }
        .mobile-menu-panel {
            position: fixed; top: 0; left: 0; width: 80%; max-width: 320px; height: 100vh; background-color: white;
            z-index: 51; transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }
        .mobile-menu-open .mobile-menu-panel { transform: translateX(0); }

        .catalog-sidebar-overlay {
            position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 60; transition: opacity 0.3s ease;
        }
        .catalog-sidebar-panel {
            position: fixed; top: 0; left: 0; width: 85%; max-width: 360px; height: 100vh; background-color: white;
            z-index: 61; transform: translateX(-100%); transition: transform 0.3s ease-in-out; overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.15); padding: 20px 16px;
        }
        .catalog-sidebar-open .catalog-sidebar-panel { transform: translateX(0); }

        .messenger-float {
            position: fixed; bottom: 90px; right: 20px; z-index: 999; display: flex; flex-direction: column;
            align-items: center; gap: 12px;
        }
        .messenger-toggle {
            width: 56px; height: 56px; border-radius: 50%; background: #D77A85; color: white; border: none;
            cursor: pointer; box-shadow: 0 4px 15px rgba(215, 122, 133, 0.4); transition: all 0.3s ease;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .messenger-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 25px rgba(215, 122, 133, 0.6); }
        .messenger-toggle .icon-chat { width: 28px; height: 28px; fill: currentColor; }
        .messenger-options {
            display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0;
            transform: scale(0.8); pointer-events: none; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            max-height: 0; overflow: visible;
        }
        .messenger-options.active {
            opacity: 1; transform: scale(1); pointer-events: auto; max-height: 300px;
        }
        .messenger-options a {
            width: 48px; height: 48px; border-radius: 50%; background: white; display: flex;
            align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; flex-shrink: 0;
        }
        .messenger-options a:hover { transform: scale(1.12); box-shadow: 0 5px 20px rgba(0,0,0,0.25); }
        .messenger-options img { width: 28px; height: 28px; object-fit: contain; }

        @keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(215, 122, 133, 0.4); }
            70% { box-shadow: 0 0 0 15px rgba(215, 122, 133, 0); }
            100% { box-shadow: 0 0 0 0 rgba(215, 122, 133, 0); }
        }
        .messenger-toggle.pulsing { animation: pulse-ring 2s ease-out infinite; }

        .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: #ffffff;
            border-top: 1px solid #e5e7eb; justify-content: space-around; align-items: center;
            padding: 6px 0 env(safe-area-inset-bottom, 6px) 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            height: 64px;
        }
        .bottom-nav a,
        .bottom-nav button {
            display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px;
            color: #6b7280; text-decoration: none; transition: color 0.2s; gap: 2px; padding: 4px 8px;
            border-radius: 8px; min-width: 56px; position: relative; background: none; border: none; cursor: pointer;
            font-family: inherit;
        }
        .bottom-nav a svg,
        .bottom-nav button svg { width: 24px; height: 24px; stroke: currentColor; fill: none; transition: stroke 0.2s; }
        .bottom-nav a.active,
        .bottom-nav button.active { color: #D77A85; }
        .bottom-nav a.active svg,
        .bottom-nav button.active svg { stroke: #D77A85; }
        .bottom-nav .nav-icon-text { font-size: 9px; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; }
        .bottom-nav .badge {
            position: absolute; top: 0; right: 0; background: #D77A85; color: white; font-size: 9px; font-weight: 700;
            min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            padding: 0 4px; transform: translate(6px, -4px);
        }

        .mobile-top-bar {
            position: sticky; top: 0; z-index: 30; background: #F9F5F2; border-bottom: 1px solid #e5e7eb;
            align-items: center; justify-content: space-between; padding: 8px 12px; height: 56px;
        }
        .mobile-top-bar .logo-link { flex-shrink: 0; }
        .mobile-top-bar .logo-link img { height: 32px; width: auto; object-fit: contain; }
        .mobile-top-bar .right-icons { display: flex; align-items: center; gap: 12px; }
        .mobile-top-bar .right-icons a { display: flex; align-items: center; justify-content: center; color: #4b5563; transition: color 0.2s; }
        .mobile-top-bar .right-icons a:hover { color: #D77A85; }
        .icon-small { width: 22px; height: 22px; stroke: currentColor; fill: none; }
        .icon-messenger { width: 22px; height: 22px; object-fit: contain; }
        .mobile-top-bar .right-icons .phone-link { color: #25D366; }

        .footer-social-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: 50%; transition: transform 0.3s ease, background-color 0.3s ease; }
        .footer-social-link:hover { transform: scale(1.15); background-color: rgba(0, 0, 0, 0.05); }
        .footer-social-link img { width: 24px; height: 24px; object-fit: contain; display: block; }

        /* ОТСТУПЫ ДЛЯ НИЖНИХ БАННЕРОВ (Десктоп/Мобайл) */
        .cookie-banner-wrapper, .bonus-banner-wrapper {
            padding-bottom: 0;
        }

        @media (max-width: 767px) {
            .desktop-header { display: none !important; }
            .mobile-top-bar { display: flex !important; }
            .bottom-nav { display: flex !important; }
            .messenger-float { display: none !important; }
            .phone-float-mobile { display: none !important; }
            .mobile-menu-btn { display: none !important; }
            main { padding-bottom: 74px; padding-top: 4px; }
            footer { margin-bottom: 64px; }
            .footer-logo-img { max-height: 30px; max-width: 150px; }
            .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
            .footer-section { text-align: center; }
            
            /* На мобильных приподнимаем баннеры над меню bottom-nav (64px) */
            .cookie-banner-wrapper, .bonus-banner-wrapper {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
            }
        }
        @media (min-width: 768px) {
            .footer-logo-img { max-height: 40px; max-width: 180px; }
            .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
            .messenger-float { display: flex !important; }
        }

        @media (max-width: 767px) {
            .desktop-only-video { display: none !important; }
            .mobile-poster { display: block !important; }
        }
        @media (min-width: 768px) {
            .desktop-only-video { display: block; }
            .mobile-poster { display: none; }
        }
    </style>

    </head>

<body class="bg-white text-gray-900 antialiased font-pragmatica overflow-x-hidden"
      x-data="{ mobileMenuOpen: false, messengerOpen: false, catalogSidebarOpen: false }"
      :class="{ 'mobile-menu-open': mobileMenuOpen, 'catalog-sidebar-open': catalogSidebarOpen }"
      x-cloak>

    <div class="mobile-top-bar" style="display: none;">
        <a href="/" class="logo-link" style="width: 110px; height: 36px; display: block;">
            <picture>
                <source srcset="https://yaratflo.ru/images/logo.webp" type="image/webp">
                <img src="https://yaratflo.ru/images/logo.png" alt="Логотип" width="149" height="56" fetchpriority="high" style="width: 100%; height: 100%; object-fit: contain;">
            </picture>
        </a>
        <div class="right-icons">
            <a href="tel:+79053130549" class="phone-link" aria-label="Позвонить">
                <svg class="icon-small" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="22" height="22">
                    <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
                </svg>
            </a>
            <a href="https://t.me/florencia_kazan" target="_blank" rel="noopener noreferrer" aria-label="Telegram">
                <img src="https://yaratflo.ru/images/tg.webp" alt="TG" class="icon-messenger" width="22" height="22" decoding="async" onerror="this.onerror=null; this.src='https://yaratflo.ru/images/tg.png';">
            </a>
            <a href="https://api.whatsapp.com/send?phone=79053130549" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
                <img src="https://yaratflo.ru/images/whatsapp.webp" alt="WA" class="icon-messenger" width="22" height="22" decoding="async" onerror="this.onerror=null; this.src='https://yaratflo.ru/images/whatsapp.png';">
            </a>
            <a href="https://max.ru/u/f9LHodD0cOKwQNfyiti9D2tJWA2dV4yQ-nSYW0-l6l7DplOmiMZNUpV6YJw" target="_blank" rel="noopener noreferrer" aria-label="Max">
                <img src="https://yaratflo.ru/images/max.webp" alt="Max" class="icon-messenger" width="22" height="22" decoding="async" onerror="this.onerror=null; this.src='https://yaratflo.ru/images/max.png';">
            </a>
            <a href="/search" aria-label="Поиск">
                <svg class="icon-small" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="22" height="22">
                    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </a>
        </div>
    </div>

    <div class="desktop-header">
        <div class="bg-ivory-light h-10 md:flex hidden items-center border-b border-white px-4">
            <div class="flex-1 text-left text-gray-900 text-sm uppercase tracking-[0.15em] whitespace-nowrap">
                г. Казань, ул. Кариева, д. 4А
            </div>
            <div class="flex-none text-center text-gray-900 text-sm uppercase tracking-[0.15em] whitespace-nowrap px-4">
                ПРЕМИАЛЬНЫЕ БУКЕТЫ С ДОСТАВКОЙ ПО КАЗАНИ
            </div>
            <div class="flex-1 text-right text-gray-900 text-sm uppercase tracking-[0.15em] whitespace-nowrap">
                <a href="tel:+79053130549" class="hover:text-rose-400 transition-colors inline-flex items-center gap-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                    +7 (905) 313-05-49
                </a>
            </div>
        </div>
        <header class="bg-ivory-light border-t border-gray-900 h-20 flex items-center justify-between px-4 md:px-8 lg:px-16 border-b border-white header-container">
            <button @click="mobileMenuOpen = true" class="md:hidden mobile-menu-btn mr-2" aria-label="Открыть меню">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>

            <a href="/" style="width: 149px; height: 56px; display: block;" class="flex-shrink-0">
                <picture>
                    <source srcset="https://yaratflo.ru/images/logo.webp" type="image/webp">
                    <img src="https://yaratflo.ru/images/logo.png" alt="Логотип" width="149" height="56" fetchpriority="high" style="width: 100%; height: 100%; object-fit: contain;">
                </picture>
            </a>

            <nav class="hidden md:flex flex-1 justify-center gap-8 lg:gap-12 desktop-only">
                <a href="/catalog" class="menu-link">КАТАЛОГ</a>
                <a href="/about" class="menu-link">О НАС</a>
                <a href="/b2b" class="menu-link">КОМПАНИЯМ</a>
                <a href="/blog" class="menu-link">БЛОГ</a>
            </nav>

            <div class="flex items-center gap-4 md:gap-6 header-icons">
                <a href="/search" class="icon-btn hidden md:inline-flex" aria-label="Поиск">
                    <svg class="w-6 h-6 stroke-gray-600 group-hover:stroke-[#D77A85]" viewBox="0 0 24 24" fill="none" width="24" height="24">
                        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-width="1.5"/>
                    </svg>
                </a>
                <a href="https://yaratflo.ru/favorites" class="icon-btn hidden md:inline-flex relative" id="favorite-link" aria-label="Избранное">
                    <svg class="w-6 h-6 stroke-gray-600 group-hover:stroke-[#D77A85]" viewBox="0 0 24 24" fill="none" width="24" height="24">
                        <path d="M4.318 6.318a4.5 4.5 0 016.364 0L12 7.636l1.318-1.318a4.5 4.5 0 116.364 6.364L12 21.364 4.318 12.682a4.5 4.5 0 010-6.364z" stroke-width="1.5"/>
                    </svg>
                    <span id="favorite-count-desktop" class="absolute -top-1 -right-1 bg-rose-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center hidden">0</span>
                </a>
                <a href="/account" class="icon-btn hidden md:inline-flex" aria-label="Аккаунт">
                    <svg class="w-6 h-6 stroke-gray-600 group-hover:stroke-[#D77A85]" viewBox="0 0 24 24" fill="none" width="24" height="24">
                        <path d="M12 14c-4.418 0-8 1.79-8 4v2h16v-2c0-2.21-3.582-4-8-4zM12 12a4 4 0 100-8 4 4 0 000 8z" stroke-width="1.5"/>
                    </svg>
                </a>
                <a href="https://yaratflo.ru/cart"
                   id="vue-cart"
                   data-initial-count="0"
                   class="icon-btn hidden md:inline-flex relative"
                   aria-label="Корзина">
                    <svg class="w-6 h-6 stroke-gray-600 group-hover:stroke-[#D77A85]" viewBox="0 0 24 24" fill="none" width="24" height="24">
                        <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13l-2.293 2.293a1 1 0 00.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" stroke-width="1.5"/>
                    </svg>
                    <span id="cart-count-desktop"
                          class="absolute -top-1 -right-1 bg-rose-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center hidden"
                          style="display: none;">
                        0
                    </span>
                </a>
            </div>
        </header>
    </div>

    <div class="mobile-menu-overlay" x-show="mobileMenuOpen" x-transition.opacity @click="mobileMenuOpen = false" x-cloak></div>
    <div class="mobile-menu-panel" x-show="mobileMenuOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" x-cloak>
        <div class="p-6">
            <div class="flex justify-between items-center mb-8">
                <span class="text-xl font-apoc uppercase">Меню</span>
                <button @click="mobileMenuOpen = false" class="p-2 hover:bg-gray-100 rounded-full transition" aria-label="Закрыть">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <nav class="space-y-4">
                <a href="/catalog" class="block py-2 text-gray-800 hover:text-rose-500 transition-colors text-lg font-pragmatica border-b border-gray-100">Каталог</a>
                <a href="/about" class="block py-2 text-gray-800 hover:text-rose-500 transition-colors text-lg font-pragmatica border-b border-gray-100">О нас</a>
                <a href="/b2b" class="block py-2 text-gray-800 hover:text-rose-500 transition-colors text-lg font-pragmatica border-b border-gray-100">Компаниям</a>
                <a href="/blog" class="block py-2 text-gray-800 hover:text-rose-500 transition-colors text-lg font-pragmatica border-b border-gray-100">Блог</a>
                <a href="/search" class="block py-2 text-gray-800 hover:text-rose-500 transition-colors text-lg font-pragmatica border-b border-gray-100">Поиск</a>
                <a href="/favorites" class="block py-2 text-gray-800 hover:text-rose-500 transition-colors text-lg font-pragmatica border-b border-gray-100">Избранное</a>
                <a href="/account" class="block py-2 text-gray-800 hover:text-rose-500 transition-colors text-lg font-pragmatica border-b border-gray-100">Аккаунт</a>
            </nav>
            <div class="mt-8 flex gap-4 justify-center">
                <a href="https://t.me/florencia_kazan" target="_blank" rel="noopener noreferrer" class="p-2 hover:bg-gray-100 rounded-full transition-colors">
                    <img src="https://yaratflo.ru/images/tg.webp" alt="Telegram" width="24" height="24" class="h-6 w-6" loading="lazy" decoding="async" onerror="this.onerror=null; this.src='https://yaratflo.ru/images/tg.png';">
                </a>
            </div>
        </div>
    </div>

    <div class="catalog-sidebar-overlay" x-show="catalogSidebarOpen" x-transition.opacity @click="catalogSidebarOpen = false" x-cloak></div>
    <div class="catalog-sidebar-panel" x-show="catalogSidebarOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" x-cloak>
        <div class="flex justify-between items-center mb-6">
            <span class="text-xl font-apoc uppercase">Каталог</span>
            <button @click="catalogSidebarOpen = false" class="p-2 hover:bg-gray-100 rounded-full transition" aria-label="Закрыть каталог">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <nav class="space-y-1">
                                                <a href="https://yaratflo.ru/catalog"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Все категории</span>
                                            </a>
                                                                <a href="/catalog?price_max=3000"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>До 3000 ₽ 🌸</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/rozy"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Букеты с розами</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/hrizantemy"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Букеты с хризантемами</span>
                                            </a>
                                                                <a href="/catalog/flowers/pionovidnye-rozy"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Пионовидные розы</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/v-korobke"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Букеты в коробках</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/v-korzine"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Букеты в корзинах</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/flowers/frantsuzskie-rozy"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Французские розы</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/flowers/gortenziei"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Букеты с гортензиями</span>
                                            </a>
                                                                <a href="/catalog/ot-3000-do-6000"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>От 3000 до 6000 ₽</span>
                                                    <span class="ml-auto text-xs px-2 py-1 rounded-full
                                 bg-rose-100 text-rose-600
                                ">
                                ХИТ
                            </span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/category/kollekciia-dofamin"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Коллекция Дофамин</span>
                                            </a>
                                                                <a href="/catalog/ot-6000-do-9000"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>От 6000 до 9000 ₽</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/monobukety"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Моно букеты</span>
                                            </a>
                                                                <a href="/catalog?sbornye=1"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Сборные букеты</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/flowers/eustoma"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Букеты с эустомами</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/flowers/alstromerii"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Букеты с альстромериями</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/flowers/diantusy"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Букеты с диантусами</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/category/bukety-nevesty"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Букеты невесты</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/category/podarki"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Подарки</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/category/okrytki"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Открытки</span>
                                            </a>
                                                                <a href="https://yaratflo.ru/catalog/piony"
                       class="block py-2 px-3 text-gray-700 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2">
                                                <span>Пионы</span>
                                            </a>
                                    </nav>
    </div>

    <main class="min-h-screen">
        <div class="max-w-7xl mx-auto px-6 py-10 font-pragmatica">

    <nav class="text-sm text-gray-500 mb-6" aria-label="breadcrumb">
        <ol class="list-reset flex space-x-2">
            <li><a href="https://yaratflo.ru" class="hover:underline">Главная</a></li>
            <li>/</li>
            <li><a href="https://yaratflo.ru/catalog" class="hover:underline">Каталог</a></li>
            <li>/</li>
            <li class="text-gray-700">Букет из 7 белых роз</li>
        </ol>
    </nav>

    <div class="md:flex md:gap-12">

        <div class="md:w-1/2">
            
            <div class="relative mb-4 p-2">
                <picture id="mainImage">
                    <source type="image/webp" srcset="https://yaratflo.ru/storage/products/main/zhk6cai2p5yosvm6axvuml3piaaw22xp4q0b0zdt-gwrdmflb-1nsey81q-qXH9eMuN.webp">
                    <img src="https://yaratflo.ru/storage/products/main/zhk6cai2p5yosvm6axvuml3piaaw22xp4q0b0zdt-gwrdmflb-1nsey81q-qXH9eMuN.jpg" 
                         class="rounded-lg shadow-md w-full h-auto object-cover"
                         alt="Букет из 7 белых роз"
                         fetchpriority="high"
                         decoding="async"
                         id="currentMainImage">
                </picture>
                                    <div class="absolute bottom-4 right-4 bg-white/80 text-gray-700 text-xs px-2 py-1 rounded shadow flex flex-col items-end z-10 max-w-max">
                        <div class="flex items-center gap-1"><span class="text-sm">↔</span><span>15 см</span></div>
                        <div class="flex items-center gap-1"><span class="text-sm">↕</span><span>55 см</span></div>
                    </div>
                            </div>

                        <div class="flex justify-end mb-4" x-data="{ favorite: false }">
                <button type="button"
                        class="favorite-toggle p-2 transition flex items-center gap-1"
                        data-product-id="441"
                        :class="{ 'text-rose-500': favorite, 'text-gray-400': !favorite }"
                        @click="favorite = !favorite; toggleFavorite($event)"
                        :title="favorite ? 'Убрать из избранного' : 'В избранное'">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M4.318 6.318a4.5 4.5 0 016.364 0L12 7.636l1.318-1.318a4.5 4.5 0 116.364 6.364L12 21.364 4.318 12.682a4.5 4.5 0 010-6.364z"/>
                    </svg>
                    <span class="text-sm" x-text="favorite ? 'В избранном' : 'В избранное'"></span>
                </button>
            </div>

                    </div>

        <div class="md:w-1/2 md:sticky md:top-4 md:self-start">
            <h1 class="text-2xl font-apoc uppercase mb-6">Букет из 7 белых роз</h1>
            
            <div class="mb-6 text-2xl">
                                    <span class="font-bold">3280.00 ₽</span>
                            </div>

            
                        

            
                        <div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <label class="flex items-start space-x-3 cursor-pointer">
                    <input type="checkbox" 
                           id="with_vase" 
                           class="mt-1 vase-checkbox" 
                           value="1"
                           data-price="1500.00">
                    <div>
                        <div class="flex items-center">
                            <span class="font-medium">Хочу добавить вазу в свой заказ</span>
                            <span class="text-lg font-semibold ml-2">1 500 ₽</span>
                        </div>
                        <div class="mt-1 text-sm text-gray-600 relative group">
                            <span class="inline-flex items-center cursor-help">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Подробнее
                            </span>
                            <div class="hidden group-hover:block absolute left-0 bottom-full mb-2 w-72 bg-white p-3 rounded shadow-lg z-10 border border-gray-200">
                                <div class="flex items-start">
                                    <img src="https://yaratflo.ru/storage/products/main/img-7487-3-gyexitgv-b9uzvhsy-3jNYiLcI_small.jpg" alt="Ваза" class="w-16 h-16 object-cover mr-3 rounded" loading="lazy" decoding="async">
                                    <div>
                                        <p class="font-medium">Прозрачная ваза подходящая для вашего букета</p>
                                        <p class="text-xs text-gray-600 mt-1 line-clamp-3" title="Прозрачная ваза, идеально подходящая для вашего букета. Этот стильный аксессуар станет прекрасным дополнением к любому букету. Ваза удобна в использовании и отлично впишется в любой интерьер. Доставка по Казани. Вид и материал вазы может отличаться от фото, но мы подберем идеальную вазу для вашего букета">
                                            Прозрачная ваза, идеально подходящая для вашего букета. Этот стильный аксессуар станет прекрасным до...
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </label>
            </div>
            
                        <div class="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <label class="flex items-start space-x-3 cursor-pointer">
                    <input type="checkbox" 
                           id="with_aquabox" 
                           class="mt-1 aquabox-checkbox" 
                           value="1"
                           data-price="200.00">
                    <div>
                        <div class="flex items-center">
                            <span class="font-medium">Хочу добавить переноску и аквабокс</span>
                            <span class="text-lg font-semibold ml-2">200 ₽</span>
                        </div>
                        <div class="mt-1 text-sm text-gray-600 relative group">
                            <span class="inline-flex items-center cursor-help">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Подробнее
                            </span>
                            <div class="hidden group-hover:block absolute left-0 bottom-full mb-2 w-72 bg-white p-3 rounded shadow-lg z-10 border border-gray-200">
                                <div class="flex items-start">
                                                                            <img src="https://yaratflo.ru/storage/products/main/img-0400-ik4albjn-tkqygtib-89kWy6TT_small.jpg" alt="Переноска и аквабокс" class="w-16 h-16 object-cover mr-3 rounded" loading="lazy" decoding="async">
                                                                        <div>
                                        <p class="font-medium">Переноска и аквабокс</p>
                                        <p class="text-xs text-gray-600 mt-1 line-clamp-3" title="Переноска и аквабокс для букета среднего размера. Обеспечивают надежную транспортировку и поддержание свежести цветов. Идеально подходят для доставки по Казани. Букет в стоимость не входит">
                                            Переноска и аквабокс для букета среднего размера. Обеспечивают надежную транспортировку и поддержани...
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </label>
            </div>
            
            <ul class="text-sm text-gray-700 divide-y divide-gray-200 border-t border-b mb-6">
                <li class="py-2">
                    <strong>Состав:</strong>
                                                                        <a href="https://yaratflo.ru/catalog?composition[]=17"
                                class="text-pink-600 hover:underline">
                                Роза белая 7 шт.
                            </a>
                                                            </li>
            </ul>

            <div class="mb-6 text-gray-800">Букет из 7 белых роз — это большой и красивый букет, который станет идеальным подарком на День матери, День рождения, День учителя или 1 сентября. Розы отличаются нежным и благородным цветом, который символизирует чистоту и искренность чувств. Доставка по Казани.</div>

                            <form id="add-to-cart-form" onsubmit="return false;">
                    <input type="hidden" name="_token" value="gyT1r3A7xOfkwH154pbbpFXiSU0y3gN8Nkz9TgLV" autocomplete="off">                    <button
                        type="submit"
                        class="bg-pink-500 hover:bg-pink-600 focus:outline-none transition-colors duration-200
                            text-white px-8 py-3 rounded-lg text-lg w-full md:w-auto"
                    >
                        В корзину
                    </button>
                </form>
                
                <div id="vase-message" class="mt-2 text-green-600 hidden">
                    ✓ Ваза добавлена к заказу
                </div>
                <div id="aquabox-message" class="mt-2 text-green-600 hidden">
                    ✓ Переноска и аквабокс добавлены к заказу
                </div>
            
            
            <div class="mt-8 bg-rose-50 border border-rose-100 rounded-lg p-4 text-sm text-gray-700">
                <div class="flex items-start gap-3">
                    <svg class="w-6 h-6 text-rose-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <p class="leading-relaxed">
                        Пожалуйста, обратите внимание: каждый цветок уникален, как и сама природа. Живые цветы не растут точь-в-точь по шаблону, поэтому оттенок бутона, степень его раскрытия или форма сборки могут немного отличаться от представленных на фотографии. Но мы обещаем, что наши флористы соберут для вас максимально похожий и по-настоящему красивый букет, сохранив его настроение и цветовую гамму!
                    </p>
                </div>
            </div>

            <div class="mt-4">
                <div class="border-b border-gray-200">
                    <button class="accordion-button flex justify-between items-center w-full py-3 text-left font-medium text-gray-700 hover:text-gray-900 focus:outline-none"
                            onclick="toggleAccordion(this)">
                        <span>Инструкция по свежести</span>
                        <svg class="h-5 w-5 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>
                    <div class="accordion-content hidden pb-4 text-sm text-gray-600 mt-2 space-y-2">
                        <p>1. Подрежьте стебли под углом 45 градусов перед тем, как поставить цветы в воду</p>
                        <p>2. Используйте чистую вазу и свежую воду комнатной температуры</p>
                        <p>3. Добавьте в воду подкормку для цветов (идет в комплекте)</p>
                        <p>4. Меняйте воду каждые 2 дня и подрезайте стебли</p>
                        <p>5. Держите букет в прохладном месте, избегая прямых солнечных лучей</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-14 font-pragmatica">
        <h2 class="text-2xl font-semibold mb-6">Отзывы</h2>

                    <p class="text-gray-500 italic mb-8">Отзывов пока нет. Будьте первыми!</p>
        
        <form action="https://yaratflo.ru/product/441/review" method="POST" enctype="multipart/form-data" class="mt-10 bg-gray-50 p-6 rounded-xl border border-gray-100 space-y-5">
            <h3 class="text-xl font-semibold mb-4">Оставить отзыв</h3>
            <input type="hidden" name="_token" value="gyT1r3A7xOfkwH154pbbpFXiSU0y3gN8Nkz9TgLV" autocomplete="off">            
            <div id="star-rating-wrapper">
                <label class="block mb-2 text-sm font-medium text-gray-700">Ваша оценка</label>
                <div class="flex items-center gap-1" id="stars-container">
                    <span class="text-gray-400 mr-2 text-sm" id="rating-text">5 из 5</span>
                                            <svg data-index="1"
                             class="review-star w-8 h-8 cursor-pointer transition-colors duration-150"
                             fill="currentColor" viewBox="0 0 20 20">
                             <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                                            <svg data-index="2"
                             class="review-star w-8 h-8 cursor-pointer transition-colors duration-150"
                             fill="currentColor" viewBox="0 0 20 20">
                             <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                                            <svg data-index="3"
                             class="review-star w-8 h-8 cursor-pointer transition-colors duration-150"
                             fill="currentColor" viewBox="0 0 20 20">
                             <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                                            <svg data-index="4"
                             class="review-star w-8 h-8 cursor-pointer transition-colors duration-150"
                             fill="currentColor" viewBox="0 0 20 20">
                             <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                                            <svg data-index="5"
                             class="review-star w-8 h-8 cursor-pointer transition-colors duration-150"
                             fill="currentColor" viewBox="0 0 20 20">
                             <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                                    </div>
                <input type="hidden" name="rating" id="review_rating_input" value="5">
            </div>

            <script>
                (function() {
                    const stars = document.querySelectorAll('.review-star');
                    const input = document.getElementById('review_rating_input');
                    const ratingText = document.getElementById('rating-text');
                    let currentRating = 5;

                    function paintStars(rating) {
                        stars.forEach(star => {
                            const index = parseInt(star.getAttribute('data-index'));
                            if (index <= rating) {
                                star.style.color = '#fbbf24';
                                star.style.opacity = '1';
                            } else {
                                star.style.color = '#d1d5db';
                                star.style.opacity = '0.7';
                            }
                        });
                        if (ratingText) {
                            ratingText.textContent = rating + ' из 5';
                        }
                    }

                    stars.forEach(star => {
                        star.addEventListener('mouseenter', function() {
                            const index = parseInt(this.getAttribute('data-index'));
                            paintStars(index);
                        });
                        star.addEventListener('mouseleave', function() {
                            paintStars(currentRating);
                        });
                        star.addEventListener('click', function() {
                            currentRating = parseInt(this.getAttribute('data-index'));
                            input.value = currentRating;
                            paintStars(currentRating);
                        });
                    });

                    paintStars(currentRating);
                })();
            </script>

            <div>
                <label for="name" class="block mb-1 text-sm font-medium text-gray-700">Ваше имя</label>
                <input id="name" name="name" type="text" required placeholder="Как к вам обращаться?"
                        class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-base focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-shadow" />
            </div>
            
            <div>
                <label for="message" class="block mb-1 text-sm font-medium text-gray-700">Ваш отзыв</label>
                <textarea id="message" name="message" rows="4" required placeholder="Расскажите о впечатлениях..."
                            class="w-full border border-gray-300 rounded-lg px-4 py-2.5 text-base focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-shadow"></textarea>
            </div>
            
            <div>
                <label for="images" class="block mb-1 text-sm font-medium text-gray-700">Прикрепить фото (до 5 шт.)</label>
                <input id="images" name="images[]" type="file" multiple accept="image/jpeg, image/png, image/webp"
                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-600 bg-white
                              file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 
                              file:text-sm file:font-semibold file:bg-pink-50 file:text-pink-600 
                              hover:file:bg-pink-100 cursor-pointer focus:outline-none focus:ring-2 focus:ring-pink-500 transition-colors" />
            </div>
            
            <button type="submit"
                    class="bg-pink-600 text-white px-8 py-3 rounded-lg hover:bg-pink-700 font-medium transition focus:outline-none focus:ring-4 focus:ring-pink-300">
                Отправить отзыв
            </button>
        </form>
    </div>

            <div class="mt-16">
            <h2 class="text-2xl font-apoc uppercase mb-6">С этим товаром покупают</h2>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                                    <div class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition group flex flex-col h-full">
                        <a href="https://yaratflo.ru/product/podarocnaia-korobka-s-napolneniem-iz-klubniki-i-ezeviki" class="block">
                            <div class="aspect-square overflow-hidden bg-gray-100">
                                                                    <picture>
                                                                                    <source type="image/webp"
                                                    srcset="https://yaratflo.ru/storage/products/main/img-4772-2-xfGCrbDY_small.webp 300w,
                                                            https://yaratflo.ru/storage/products/main/img-4772-2-xfGCrbDY_medium.webp 600w"
                                                    sizes="(max-width: 640px) 50vw, 33vw">
                                                                                <img src="https://yaratflo.ru/storage/products/main/img-4772-2-xfGCrbDY_small.jpg" 
                                             srcset="https://yaratflo.ru/storage/products/main/img-4772-2-xfGCrbDY_small.jpg 300w,
                                                     https://yaratflo.ru/storage/products/main/img-4772-2-xfGCrbDY_medium.jpg 600w"
                                             sizes="(max-width: 640px) 50vw, 33vw"
                                             alt="Подарочная коробка с наполнением из клубники и ежевики" 
                                             class="w-full h-full object-cover group-hover:scale-105 transition duration-300" 
                                             loading="lazy" decoding="async">
                                    </picture>
                                                            </div>
                        </a>
                        <div class="p-4 flex flex-col flex-grow">
                            <a href="https://yaratflo.ru/product/podarocnaia-korobka-s-napolneniem-iz-klubniki-i-ezeviki" class="hover:text-rose-600 transition">
                                <h3 class="font-pragmatica font-semibold text-sm mb-2 line-clamp-2">Подарочная коробка с наполнением из клубники и ежевики</h3>
                            </a>
                            <p class="text-rose-600 font-bold text-lg font-pragmatica mt-auto">7 000 ₽</p>
                            <button class="add-gift w-full mt-3 bg-rose-500 hover:bg-rose-600 text-white py-2 rounded-lg text-sm font-pragmatica transition flex items-center justify-center gap-2"
                                    data-product-id="624"
                                    data-product-name="Подарочная коробка с наполнением из клубники и ежевики"
                                    data-product-price="7000.00">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                </svg>
                                Добавить
                            </button>
                        </div>
                    </div>
                                    <div class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition group flex flex-col h-full">
                        <a href="https://yaratflo.ru/product/korobka-podarocnaia-s-napolneniem-iagody" class="block">
                            <div class="aspect-square overflow-hidden bg-gray-100">
                                                                    <picture>
                                                                                    <source type="image/webp"
                                                    srcset="https://yaratflo.ru/storage/products/main/img-4770-4udBe3O2_small.webp 300w,
                                                            https://yaratflo.ru/storage/products/main/img-4770-4udBe3O2_medium.webp 600w"
                                                    sizes="(max-width: 640px) 50vw, 33vw">
                                                                                <img src="https://yaratflo.ru/storage/products/main/img-4770-4udBe3O2_small.jpg" 
                                             srcset="https://yaratflo.ru/storage/products/main/img-4770-4udBe3O2_small.jpg 300w,
                                                     https://yaratflo.ru/storage/products/main/img-4770-4udBe3O2_medium.jpg 600w"
                                             sizes="(max-width: 640px) 50vw, 33vw"
                                             alt="Коробка подарочная с наполнением Ягоды" 
                                             class="w-full h-full object-cover group-hover:scale-105 transition duration-300" 
                                             loading="lazy" decoding="async">
                                    </picture>
                                                            </div>
                        </a>
                        <div class="p-4 flex flex-col flex-grow">
                            <a href="https://yaratflo.ru/product/korobka-podarocnaia-s-napolneniem-iagody" class="hover:text-rose-600 transition">
                                <h3 class="font-pragmatica font-semibold text-sm mb-2 line-clamp-2">Коробка подарочная с наполнением Ягоды</h3>
                            </a>
                            <p class="text-rose-600 font-bold text-lg font-pragmatica mt-auto">7 000 ₽</p>
                            <button class="add-gift w-full mt-3 bg-rose-500 hover:bg-rose-600 text-white py-2 rounded-lg text-sm font-pragmatica transition flex items-center justify-center gap-2"
                                    data-product-id="625"
                                    data-product-name="Коробка подарочная с наполнением Ягоды"
                                    data-product-price="7000.00">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                </svg>
                                Добавить
                            </button>
                        </div>
                    </div>
                                    <div class="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition group flex flex-col h-full">
                        <a href="https://yaratflo.ru/product/prozracnaia-vaza-podxodiashhaia-dlia-vasego-buketa" class="block">
                            <div class="aspect-square overflow-hidden bg-gray-100">
                                                                    <picture>
                                                                                    <source type="image/webp"
                                                    srcset="https://yaratflo.ru/storage/products/main/img-7487-3-gyexitgv-b9uzvhsy-3jNYiLcI_small.webp 300w,
                                                            https://yaratflo.ru/storage/products/main/img-7487-3-gyexitgv-b9uzvhsy-3jNYiLcI_medium.webp 600w"
                                                    sizes="(max-width: 640px) 50vw, 33vw">
                                                                                <img src="https://yaratflo.ru/storage/products/main/img-7487-3-gyexitgv-b9uzvhsy-3jNYiLcI_small.jpg" 
                                             srcset="https://yaratflo.ru/storage/products/main/img-7487-3-gyexitgv-b9uzvhsy-3jNYiLcI_small.jpg 300w,
                                                     https://yaratflo.ru/storage/products/main/img-7487-3-gyexitgv-b9uzvhsy-3jNYiLcI_medium.jpg 600w"
                                             sizes="(max-width: 640px) 50vw, 33vw"
                                             alt="Прозрачная ваза подходящая для вашего букета" 
                                             class="w-full h-full object-cover group-hover:scale-105 transition duration-300" 
                                             loading="lazy" decoding="async">
                                    </picture>
                                                            </div>
                        </a>
                        <div class="p-4 flex flex-col flex-grow">
                            <a href="https://yaratflo.ru/product/prozracnaia-vaza-podxodiashhaia-dlia-vasego-buketa" class="hover:text-rose-600 transition">
                                <h3 class="font-pragmatica font-semibold text-sm mb-2 line-clamp-2">Прозрачная ваза подходящая для вашего букета</h3>
                            </a>
                            <p class="text-rose-600 font-bold text-lg font-pragmatica mt-auto">1 500 ₽</p>
                            <button class="add-gift w-full mt-3 bg-rose-500 hover:bg-rose-600 text-white py-2 rounded-lg text-sm font-pragmatica transition flex items-center justify-center gap-2"
                                    data-product-id="26"
                                    data-product-name="Прозрачная ваза подходящая для вашего букета"
                                    data-product-price="1500.00">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                </svg>
                                Добавить
                            </button>
                        </div>
                    </div>
                            </div>
        </div>
    
</div>

<script>
    window.addEventListener('load', function() {
        if (window.pushEcommerceDetail) {
            window.pushEcommerceDetail({
                id: 441,
                name: "Букет из 7 белых роз",
                price: 3280,
                brand: "ЯРАТ",
                category: "Лучшее предложение"
            });
        }
    });
</script>


<script>
document.addEventListener('DOMContentLoaded', function() {
    const vaseCheckbox = document.getElementById('with_vase');
    const vaseMessage = document.getElementById('vase-message');

    if (vaseCheckbox) {
        vaseCheckbox.addEventListener('change', function() {
            if (vaseMessage) {
                vaseMessage.classList.toggle('hidden', !this.checked);
            }
        });
    }

    const aquaboxCheckbox = document.getElementById('with_aquabox');
    const aquaboxMessage = document.getElementById('aquabox-message');

    if (aquaboxCheckbox) {
        aquaboxCheckbox.addEventListener('change', function() {
            if (aquaboxMessage) {
                aquaboxMessage.classList.toggle('hidden', !this.checked);
            }
        });
    }

    const addForm = document.getElementById('add-to-cart-form');
    if (addForm) {
        addForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (typeof window.yaratCartAdd === 'function') {
                window.yaratCartAdd(
                    441,
                    1,
                    "Букет из 7 белых роз",
                    3280,
                    0
                );
            } else if (typeof window.addToCart === 'function') {
                window.addToCart(441, 1);
            }

            let delay = 300;

            if (vaseCheckbox && vaseCheckbox.checked) {
                                setTimeout(() => {
                    if (typeof window.yaratCartAdd === 'function') {
                        window.yaratCartAdd(
                            26,
                            1,
                            "Прозрачная ваза подходящая для вашего букета",
                            1500
                        );
                    } else if (typeof window.addToCart === 'function') {
                        window.addToCart(26, 1);
                    }
                }, delay);
                delay += 300;
                            }

            if (aquaboxCheckbox && aquaboxCheckbox.checked) {
                                setTimeout(() => {
                    if (typeof window.yaratCartAdd === 'function') {
                        window.yaratCartAdd(
                            601,
                            1,
                            "Переноска и аквабокс",
                            200
                        );
                    } else if (typeof window.addToCart === 'function') {
                        window.addToCart(601, 1);
                    }
                }, delay);
                            }
        });
    }

    document.querySelectorAll('.add-gift').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const productId = this.dataset.productId;
            const productName = this.dataset.productName;
            const productPrice = this.dataset.productPrice;
            
            if (typeof window.yaratCartAdd === 'function') {
                window.yaratCartAdd(productId, 1, productName, productPrice);
            } else if (typeof window.addToCart === 'function') {
                window.addToCart(productId, 1);
            }
        });
    });
});

function changeMainImage(webpUrl, jpgUrl) {
    const mainImage = document.getElementById('mainImage');
    mainImage.innerHTML = `
        <source type="image/webp" srcset="${webpUrl}">
        <img src="${jpgUrl}" 
             class="rounded-lg shadow-md w-full h-auto object-cover"
             fetchpriority="high" decoding="async"
             alt="Букет из 7 белых роз">
    `;
}

function toggleAccordion(button) {
    const content = button.nextElementSibling;
    const icon = button.querySelector('svg');
    if (content.classList.contains('hidden')) {
        content.classList.remove('hidden');
        icon.classList.add('rotate-180');
    } else {
        content.classList.add('hidden');
        icon.classList.remove('rotate-180');
    }
}
</script>

<style>
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}
.overflow-y-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #ec4899;
    border-radius: 10px;
}
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #db2777;
}
.transition-transform {
    transition: transform 0.2s ease-in-out;
}
.rotate-180 {
    transform: rotate(180deg);
}
</style>
    </main>

    <footer class="bg-ivory-light border-t border-gray-200 mt-12">
        <div class="container mx-auto px-4 py-10 footer-grid grid grid-cols-1 md:grid-cols-4 gap-8 text-sm">
            <div class="footer-section">
                <div class="flex justify-center md:justify-start mb-4" style="width: 149px; height: 56px;">
                    <picture>
                        <source srcset="https://yaratflo.ru/images/logo.webp" type="image/webp">
                        <img src="https://yaratflo.ru/images/logo.png" alt="Логотип" width="149" height="56" loading="lazy" decoding="async" style="width: 100%; height: 100%; object-fit: contain;">
                    </picture>
                </div>
                <p class="text-gray-600 text-[15px] leading-relaxed text-center md:text-left">
                    Свежие цветы с доставкой по Казани. Букеты ручной работы для ваших тёплых моментов.
                </p>
            </div>
            <div class="footer-section">
                <h4 class="font-apoc text-base uppercase tracking-wider mb-4 text-gray-700 text-center md:text-left">Меню</h4>
                <ul class="space-y-3 mb-6 text-center md:text-left">
                    <li><a href="/catalog" class="text-gray-600 hover:text-rose-300 transition-colors block">Каталог</a></li>
                    <li><a href="/about" class="text-gray-600 hover:text-rose-300 transition-colors block">О нас</a></li>
                    <li><a href="/blog" class="text-gray-600 hover:text-rose-300 transition-colors block">Блог</a></li>
                </ul>
                <div class="flex gap-4 justify-center md:justify-start">
                    <a href="https://t.me/florencia_kazan" target="_blank" rel="noopener noreferrer" class="footer-social-link">
                        <img src="https://yaratflo.ru/images/tg.webp" alt="Telegram" width="24" height="24" loading="lazy" decoding="async" onerror="this.onerror=null; this.src='https://yaratflo.ru/images/tg.png';">
                    </a>
                    <a href="https://max.ru/u/f9LHodD0cOKwQNfyiti9D2tJWA2dV4yQ-nSYW0-l6l7DplOmiMZNUpV6YJw" target="_blank" rel="noopener noreferrer" class="footer-social-link" title="Max">
                        <img src="https://yaratflo.ru/images/max.webp" alt="Max" width="24" height="24" loading="lazy" decoding="async" onerror="this.onerror=null; this.src='https://yaratflo.ru/images/max.png';">
                    </a>
                </div>
            </div>
            <div class="footer-section">
                <h4 class="font-apoc text-base uppercase tracking-wider mb-4 text-gray-700 text-center md:text-left">Контакты</h4>
                <ul class="space-y-3 text-gray-600 text-center md:text-left">
                    <li>+7 (905) 313-05-49</li>
                    <li>x.dilya@yandex.ru</li>
                    <li>Казань, ул. Кариева, 4а</li>
                </ul>
            </div>
            <div class="footer-section">
                <h4 class="font-apoc text-base uppercase tracking-wider mb-4 text-gray-700 text-center md:text-left">Информация</h4>
                <ul class="space-y-3 text-center md:text-left">
                    <li><a href="https://yaratflo.ru/delivery" class="text-gray-600 hover:text-rose-300 transition-colors block">Доставка</a></li>
                    <li><a href="https://yaratflo.ru/payment-methods" class="text-gray-600 hover:text-rose-300 transition-colors block">Способы оплаты</a></li>
                    <li><a href="https://yaratflo.ru/quality" class="text-gray-600 hover:text-rose-300 transition-colors block">Гарантия качества</a></li>
                    <li><a href="https://yaratflo.ru/returns" class="text-gray-600 hover:text-rose-300 transition-colors block">Возврат товаров</a></li>
                    <li><a href="https://yaratflo.ru/offer" class="text-gray-600 hover:text-rose-300 transition-colors block">Договор оферты</a></li>
                    <li><a href="https://yaratflo.ru/privacy" class="text-gray-600 hover:text-rose-300 transition-colors block">Конфиденциальность</a></li>
                    <li><a href="https://yaratflo.ru/personal-data" class="text-gray-600 hover:text-rose-300 transition-colors block">Согласие на ПДн</a></li>
                </ul>
            </div>
        </div>
        <div class="text-center text-xs text-gray-500 py-6 border-t border-gray-200">
            © 2026 ЯРАТ. Все права защищены.
        </div>
    </footer>

    <nav class="bottom-nav" role="navigation" style="display: none;">
        <a href="/" class="">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1"/>
            </svg>
            <span class="nav-icon-text">Главная</span>
        </a>
        <button @click="catalogSidebarOpen = true" class="">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
            <span class="nav-icon-text">Каталог</span>
        </button>
        <a href="https://yaratflo.ru/cart" class="" id="mobile-cart-link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
                <path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/>
            </svg>
            <span class="nav-icon-text">Корзина</span>
            <span id="mobile-cart-badge" class="badge" style="display: none;">
                0
            </span>
        </a>
        <a href="https://yaratflo.ru/favorites" class="" id="mobile-favorite-link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                <path d="M4.318 6.318a4.5 4.5 0 016.364 0L12 7.636l1.318-1.318a4.5 4.5 0 116.364 6.364L12 21.364 4.318 12.682a4.5 4.5 0 010-6.364z"/>
            </svg>
            <span class="nav-icon-text">Избранное</span>
            <span id="mobile-favorite-badge" class="badge" style="display: none;">0</span>
        </a>
        <a href="/account" class="">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                <path d="M12 14c-4.418 0-8 1.79-8 4v2h16v-2c0-2.21-3.582-4-8-4zM12 12a4 4 0 100-8 4 4 0 000 8z"/>
            </svg>
            <span class="nav-icon-text">Войти</span>
        </a>
    </nav>

    <div class="messenger-float" x-data="{ open: false }" @click.away="open = false">
        <div class="messenger-options" :class="{ 'active': open }">
            <a href="https://t.me/florencia_kazan" target="_blank" rel="noopener noreferrer" title="Telegram">
                <img src="https://yaratflo.ru/images/tg.webp" alt="Telegram" width="28" height="28" onerror="this.onerror=null; this.src='https://yaratflo.ru/images/tg.png';">
            </a>
            <a href="https://api.whatsapp.com/send?phone=79053130549" target="_blank" rel="noopener noreferrer" title="WhatsApp">
                <img src="https://yaratflo.ru/images/whatsapp.webp" alt="WhatsApp" width="28" height="28" onerror="this.onerror=null; this.src='https://yaratflo.ru/images/whatsapp.png';">
            </a>
            <a href="https://max.ru/u/f9LHodD0cOKwQNfyiti9D2tJWA2dV4yQ-nSYW0-l6l7DplOmiMZNUpV6YJw" target="_blank" rel="noopener noreferrer" title="Max">
                <img src="https://yaratflo.ru/images/max.webp" alt="Max" width="28" height="28" onerror="this.onerror=null; this.src='https://yaratflo.ru/images/max.png';">
            </a>
        </div>
        <button class="messenger-toggle pulsing" @click="open = !open" aria-label="Открыть мессенджеры">
            <svg class="icon-chat" viewBox="0 0 24 24" width="28" height="28">
                <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/>
            </svg>
        </button>
    </div>

    <div id="cart-notification" class="fixed bottom-4 right-4 bg-white rounded-lg shadow-xl border border-gray-200 p-4 max-w-sm hidden z-50">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <svg class="h-6 w-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
            </div>
            <div class="ml-3 flex-1">
                <p class="text-sm font-medium text-gray-900" id="cart-notification-message">Товар добавлен в корзину</p>
                <div class="mt-4 flex gap-2">
                    <button id="cart-notification-continue" class="bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm px-3 py-1 rounded">Продолжить покупки</button>
                    <a href="https://yaratflo.ru/cart" class="bg-rose-500 hover:bg-rose-600 text-white text-sm px-3 py-1 rounded text-center">Перейти в корзину</a>
                </div>
            </div>
            <button class="ml-4 text-gray-400 hover:text-gray-500" onclick="document.getElementById('cart-notification').classList.add('hidden')">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
    </div>

        <!-- Бонусный баннер -->
    <div x-data="bonusBannerComponent"
         x-show="showBanner"
         x-transition:enter="transition ease-out duration-500"
         x-transition:enter-start="transform translate-y-full"
         x-transition:enter-end="transform translate-y-0"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="transform translate-y-0"
         x-transition:leave-end="transform translate-y-full"
         class="bonus-banner-wrapper fixed bottom-0 left-0 w-full bg-[#FDF7F5] border-t border-[#D77A85] shadow-[0_-5px_25px_rgba(0,0,0,0.15)] z-[9998]"
         style="display: none;"
         x-cloak>
        
        <div class="container mx-auto px-4 py-4 md:py-3 flex flex-col md:flex-row items-center justify-between gap-4 relative">
            <button @click="closeBanner" type="button" class="absolute top-2 right-2 md:relative md:top-0 md:right-0 md:order-last p-2 text-gray-400 hover:text-rose-500 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>

            <div class="flex items-center gap-3 text-center md:text-left">
                <div class="w-10 h-10 bg-[#D77A85] text-white rounded-full flex items-center justify-center font-bold text-lg flex-shrink-0 shadow-md">
                    🎁
                </div>
                <div>
                    <h4 class="font-apoc text-lg text-gray-900 uppercase">Дарим 500 рублей</h4>
                    <p class="text-sm text-gray-600 font-pragmatica">на бонусный счет при регистрации</p>
                </div>
            </div>

            <div class="w-full md:w-auto">
                <form @submit.prevent="submitBonus" class="flex flex-col gap-3 w-full">
                    <div class="flex flex-col sm:flex-row gap-2 relative w-full">
                        <input type="email" x-model="email" required placeholder="Ваш Email" 
                               class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-[#D77A85] w-full sm:w-64 font-pragmatica text-sm"
                               :disabled="loading || isSuccess">
                        
                        <button type="submit" :disabled="loading || isSuccess" 
                                class="bg-[#D77A85] hover:bg-[#c46974] text-white px-6 py-2 rounded-lg font-semibold transition disabled:opacity-50 text-sm whitespace-nowrap">
                            <span x-show="!loading">Получить</span>
                            <span x-show="loading">Отправка...</span>
                        </button>
                    </div>
                    
                    <div class="flex items-start text-left mt-1">
                        <input type="checkbox" id="banner_agree_pd" required
                               class="mt-0.5 w-4 h-4 rounded border-gray-300 text-rose-400 focus:ring-rose-300 cursor-pointer flex-shrink-0">
                        <label for="banner_agree_pd" class="ml-2 text-[10px] sm:text-xs text-gray-500 cursor-pointer leading-tight">
                            Я даю согласие на обработку персональных данных в соответствии с 
                            <a href="https://yaratflo.ru/personal-data" target="_blank" class="text-rose-500 hover:underline">Политикой конфиденциальности</a>
                        </label>
                    </div>
                </form>
                
                <div x-show="message" 
                     x-text="message" 
                     x-transition
                     :class="isError ? 'text-red-500' : 'text-green-600'" 
                     class="text-xs font-medium mt-2 text-center md:text-left">
                </div>
            </div>
        </div>
    </div>

    <!-- Умная логика задержки бонусного баннера: ждем решения по куки -->
    <script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('bonusBannerComponent', () => ({
            showBanner: false,
            email: '',
            loading: false,
            message: '',
            isError: false,
            isSuccess: false,

            init() {
                if (!localStorage.getItem('hideBonusBanner')) {
                    // Если пользователь уже ранее выбирал куки
                    if (localStorage.getItem('cookie_consent_yarat')) {
                        setTimeout(() => {
                            this.showBanner = true;
                        }, 2000);
                    } else {
                        // Если еще не выбрал куки - слушаем событие выбора
                        window.addEventListener('cookie-consent-resolved', () => {
                            setTimeout(() => {
                                this.showBanner = true;
                            }, 2000);
                        }, { once: true });
                    }
                }
            },

            closeBanner() {
                this.showBanner = false;
                localStorage.setItem('hideBonusBanner', 'true');
            },

            async submitBonus() {
                if (!this.email) return;
                
                this.loading = true;
                this.message = '';
                this.isError = false;
                this.isSuccess = false;

                try {
                    const tokenElement = document.querySelector('meta[name="csrf-token"]');
                    if (!tokenElement) throw new Error('CSRF токен не найден на странице');

                    const response = await fetch("https://yaratflo.ru/claim-bonus", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': tokenElement.content,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({ email: this.email })
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        this.message = data.message;
                        this.isError = false;
                        this.isSuccess = true;
                        
                        setTimeout(() => {
                            this.closeBanner();
                            window.location.reload();
                        }, 3000);
                    } else {
                        this.isError = true;
                        this.message = data.message || (data.errors ? Object.values(data.errors)[0][0] : 'Ошибка при регистрации.');
                    }
                } catch (error) {
                    this.isError = true;
                    this.message = 'Внутренняя ошибка сервера. Попробуйте позже.';
                } finally {
                    this.loading = false;
                }
            }
        }));
    });
    </script>
    
    <!-- Cookie Banner для Яндекс Метрики (с кнопкой отказа и генерацией события) -->
    <div x-data="cookieConsent()" 
         x-show="!consented" 
         x-transition:enter="transition ease-out duration-500"
         x-transition:enter-start="transform translate-y-full"
         x-transition:enter-end="transform translate-y-0"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="transform translate-y-0"
         x-transition:leave-end="transform translate-y-full"
         class="cookie-banner-wrapper fixed bottom-0 left-0 w-full bg-white border-t border-gray-200 shadow-[0_-10px_30px_rgba(0,0,0,0.1)] z-[9999]"
         style="display: none;" 
         x-cloak>
        
        <div class="container mx-auto px-4 py-4 md:py-5 flex flex-col md:flex-row items-center justify-between gap-4">
            <div class="text-sm text-gray-600 font-pragmatica text-center md:text-left flex-1">
                Мы используем файлы cookie и сервис веб-аналитики <strong>Яндекс Метрика</strong> для обеспечения корректной работы сайта и анализа пользовательского опыта. 
                Продолжая использовать сайт, вы даете согласие на обработку ваших данных в соответствии с 
                <a href="https://yaratflo.ru/personal-data" class="text-[#D77A85] hover:underline font-medium">Политикой конфиденциальности</a>.
            </div>
            
            <div class="flex gap-2 w-full md:w-auto">
                <button @click="decline()" 
                        class="w-full md:w-auto whitespace-nowrap bg-gray-100 hover:bg-gray-200 text-gray-600 px-6 py-2.5 rounded-lg font-medium transition-colors text-sm shadow-sm">
                    Только необходимые
                </button>
                <button @click="accept()" 
                        class="w-full md:w-auto whitespace-nowrap bg-[#D77A85] hover:bg-[#c46974] text-white px-8 py-2.5 rounded-lg font-medium transition-colors text-sm shadow-sm">
                    Согласен
                </button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('cookieConsent', () => ({
                consented: false,
                init() {
                    const status = localStorage.getItem('cookie_consent_yarat');
                    if (status) {
                        this.consented = true;
                        window.dispatchEvent(new Event('cookie-consent-resolved'));
                    } else {
                        setTimeout(() => { this.consented = false; }, 1000);
                    }
                },
                accept() {
                    this.consented = true;
                    localStorage.setItem('cookie_consent_yarat', 'accepted');
                    window.dispatchEvent(new Event('cookie-consent-resolved'));
                },
                decline() {
                    this.consented = true;
                    localStorage.setItem('cookie_consent_yarat', 'declined');
                    window.dispatchEvent(new Event('cookie-consent-resolved'));
                }
            }));
        });
    </script>
    
    <script>
        window.showCartNotification = function(message, type = 'success') {
            const notification = document.getElementById('cart-notification');
            const messageEl = document.getElementById('cart-notification-message');
            if (!notification) return;
            messageEl.textContent = message;
            notification.classList.remove('hidden');
            const icon = notification.querySelector('svg');
            if (type === 'success') { icon.classList.add('text-green-500'); icon.classList.remove('text-red-500'); }
            else { icon.classList.add('text-red-500'); icon.classList.remove('text-green-500'); }
            setTimeout(() => notification.classList.add('hidden'), 5000);
        };
        
        document.getElementById('cart-notification-continue')?.addEventListener('click', function() {
            document.getElementById('cart-notification').classList.add('hidden');
        });

        window.yaratCartAdd = function(productId, quantity = 1, productName = null, productPrice = null, withVase = '0') {
            const parsedQuantity = parseInt(quantity) || 1;
            const formData = new FormData();
            formData.append('quantity', parsedQuantity);
            if (withVase === '1') {
                formData.append('with_vase', '1');
            }
            
            const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
            formData.append('_token', csrfToken);

            fetch(`/cart/add/${productId}`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(async response => {
                if (response.status === 419) {
                    window.location.reload();
                    return Promise.reject('CSRF_EXPIRED');
                }
                
                if (!response.ok) {
                    throw new Error(`Ошибка сервера (код ${response.status})`);
                }
                
                return response.text(); 
            })
            .then(text => {
                if (!text) return; 

                try {
                    const data = JSON.parse(text);
                    if (data && data.success === false) {
                        throw new Error(data.message || 'Не удалось добавить товар');
                    }
                } catch(e) {
                }

                if (typeof window.updateCartCount === 'function') window.updateCartCount();
                
                if (window.dataLayer && productName && productPrice) {
                    window.dataLayer.push({
                        "ecommerce": {
                            "currencyCode": "RUB",
                            "add": {
                                "products": [{
                                    "id": String(productId),
                                    "name": String(productName),
                                    "price": parseFloat(productPrice),
                                    "quantity": parsedQuantity
                                }]
                            }
                        }
                    });
                }

                window.showCartNotification('Товар добавлен в корзину', 'success');
            })
            .catch(error => {
                if(error === 'CSRF_EXPIRED') return;
                console.error("Ошибка при добавлении в корзину:", error);
                window.showCartNotification(error.message || 'Не удалось добавить товар', 'error');
            });
        };

        window.updateFavoriteCount = function() {
            fetch('/favorites/count', { headers: { 'Accept': 'application/json' } })
                .then(res => res.json())
                .then(data => {
                    const desktopBadge = document.getElementById('favorite-count-desktop');
                    const mobileBadge = document.getElementById('mobile-favorite-badge');
                    if (data.count > 0) {
                        if (desktopBadge) { desktopBadge.textContent = data.count; desktopBadge.classList.remove('hidden'); }
                        if (mobileBadge) { mobileBadge.textContent = data.count; mobileBadge.style.display = 'flex'; }
                    } else {
                        if (desktopBadge) desktopBadge.classList.add('hidden');
                        if (mobileBadge) mobileBadge.style.display = 'none';
                    }
                })
                .catch(console.error);
        };
        
        window.updateCartCount = function() {
            fetch('/cart/count', { headers: { 'Accept': 'application/json' } })
                .then(res => res.json())
                .then(data => {
                    const mobileBadge = document.getElementById('mobile-cart-badge');
                    const desktopBadge = document.getElementById('cart-count-desktop');

                    if (data.count > 0) {
                        if (mobileBadge) { mobileBadge.textContent = data.count; mobileBadge.style.display = 'flex'; }
                        if (desktopBadge) { desktopBadge.textContent = data.count; desktopBadge.style.display = 'flex'; }
                    } else {
                        if (mobileBadge) mobileBadge.style.display = 'none';
                        if (desktopBadge) desktopBadge.style.display = 'none';
                    }
                })
                .catch(console.error);
        };

        window.addEventListener('load', function () {
            setTimeout(function () {
                if (typeof window.updateFavoriteCount === 'function') {
                    window.updateFavoriteCount();
                }
                if (typeof window.updateCartCount === 'function') {
                    window.updateCartCount();
                }
            }, 2000);
        });

        document.addEventListener('favorite-updated', window.updateFavoriteCount);
        document.addEventListener('cart-updated', window.updateCartCount);

        window.toggleFavorite = async function(event) {
            const button = event.currentTarget;
            const productId = button.dataset.productId;
            const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
            try {
                const response = await fetch(`/favorites/toggle/${productId}`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json', 'Content-Type': 'application/json' }
                });
                const data = await response.json();
                if (data.success) {
                    window.updateFavoriteCount();
                    if (window.location.pathname === '/favorites' && !data.added) window.location.reload();
                }
            } catch (error) {
                console.error("Ошибка при добавлении в избранное:", error);
            }
        };
        
        window.pushEcommerceAdd = function(product) {
            window.dataLayer.push({
                "ecommerce": { "currencyCode": "RUB", "add": { "products": [{
                    "id": String(product.id), "name": product.name,
                    "price": parseFloat(product.price), "quantity": product.quantity || 1
                }] } }
            });
        };
        window.pushEcommerceRemove = function(product) {
            window.dataLayer.push({
                "ecommerce": { "currencyCode": "RUB", "remove": { "products": [{
                    "id": String(product.id), "name": product.name,
                    "price": parseFloat(product.price), "quantity": product.quantity || 1
                }] } }
            });
        };
        window.pushEcommercePurchase = function(orderId, products) {
            window.dataLayer.push({
                "ecommerce": { "currencyCode": "RUB", "purchase": {
                    "actionField": { "id": String(orderId) },
                    "products": products.map(p => ({
                        "id": String(p.id), "name": p.name,
                        "price": parseFloat(p.price), "quantity": p.quantity
                    }))
                } }
            });
        };
        window.pushEcommerceDetail = function(product) {
            window.dataLayer.push({
                "ecommerce": { "currencyCode": "RUB", "detail": { "products": [{
                    "id": String(product.id), "name": product.name,
                    "price": parseFloat(product.price),
                    "brand": product.brand || "ЯРАТ",
                    "category": product.category || ""
                }] } }
            });
        };
        window.pushEcommerceImpressions = function(products) {
            window.dataLayer.push({
                "ecommerce": { "currencyCode": "RUB", "impressions": products.map((p, index) => ({
                    "id": String(p.id), "name": p.name,
                    "price": parseFloat(p.price), "category": p.category || "",
                    "list": p.list || "Каталог", "position": p.position || index + 1
                })) }
            });
        };
    </script>
</body>
</html>