@extends('layouts.app')

@section('title', ($import->isImproveExisting() ? 'Improve' : 'Import').' #'.$import->id.' – Product AI')

@section('content')
@php
    $isImprove = $import->isImproveExisting();
    $seoLocked = $import->isSeoLocked();
    $improveMeta = $import->improveMeta();
    $media = $import->media;
    $canEditMedia = $import->canAddMoreMedia();
    $form = is_array($import->form_data) ? $import->form_data : [];
    $needs = is_array($form['needs_manual_confirmation'] ?? null)
        ? $form['needs_manual_confirmation']
        : (is_array($import->ai_analysis['needs_manual_confirmation'] ?? null) ? $import->ai_analysis['needs_manual_confirmation'] : ['sku', 'price', 'inventory', 'weight']);
    $fv = function (string $key, $fallback = '') use ($form, $import) {
        if (in_array($key, ['title', 'description', 'sku', 'product_details'], true)) {
            return old($key, $import->{$key} ?? $fallback);
        }
        $stored = $form[$key] ?? $fallback;

        return old($key, $stored);
    };
    $lifestyleRefs = $import->lifestyleSourceImages();
    $hasLifestyleSource = $lifestyleRefs->isNotEmpty();
    $lifestylePromptValue = old('lifestyle_prompt', $lifestylePrompt ?? '');
    $enhancePromptValue = old('enhance_prompt', $enhancePrompt ?? '');
    $needClass = function (string $key) use ($needs, $fv) {
        $empty = trim((string) $fv($key, '')) === '';

        return ($empty && (in_array($key, $needs, true) || in_array($key, ['sku', 'price', 'inventory', 'weight', 'clarity', 'diamond_color', 'carat_weight'], true)))
            ? 'pai-field--needs'
            : '';
    };
    $stepKeys = array_keys($wizardSteps);
    $stepIndex = array_search($wizardStep, $stepKeys, true);
    if ($stepIndex === false) {
        $stepIndex = 0;
        $wizardStep = 'media';
    }
    $prevStep = $stepIndex > 0 ? $stepKeys[$stepIndex - 1] : null;
    $nextStep = $stepIndex < count($stepKeys) - 1 ? $stepKeys[$stepIndex + 1] : null;
    $typeOptions = config('product_ai_import.product_type_options', []);
    $categoryOptions = config('product_ai_import.product_category_options', []);
    $typeToCategory = config('product_ai_import.product_type_to_category', []);
    $themeTemplateOptions = config('product_ai_import.theme_template_options', []);
    $typeToThemeTemplate = config('product_ai_import.product_type_to_theme_template', []);
    $defaultVendor = config('product_ai_import.default_vendor', 'AVI THE JEWELER');
    $shopifyDone = (bool) $import->shopify_product_gid;
    $adminUrl = $form['shopify_admin_url'] ?? null;
    $selectedType = old('product_type', $form['product_type'] ?? '');
    $selectedCategoryId = old('category_id', $form['category_id'] ?? ($typeToCategory[$selectedType] ?? ''));
    $selectedTemplateSuffix = old('template_suffix', $form['template_suffix'] ?? ($typeToThemeTemplate[$selectedType] ?? ''));
    $selectedCollectionId = old('collection_id', $form['collection_id'] ?? '');
    $selectedCollectionTitle = old('collection_title', $form['collection_title'] ?? '');
    $selectedTags = old('tags', $form['tags'] ?? '');
    $selectedCollectionIds = old('collection_ids', $form['collection_ids'] ?? []);
    if (! is_array($selectedCollectionIds)) {
        $selectedCollectionIds = [];
    }
    $guideProductTitle = $form['guide_product_title'] ?? null;
    $guideProductId = $form['guide_product_id'] ?? null;
    $guideMetafields = is_array($form['guide_metafields'] ?? null) ? $form['guide_metafields'] : [];
    $guideColorValues = is_array($form['guide_color_values'] ?? null) ? $form['guide_color_values'] : [];
    $guideColorOption = $form['guide_color_option'] ?? 'Color';
    $guideSnapshot = is_array($form['guide_snapshot'] ?? null) ? $form['guide_snapshot'] : null;
    $guideStructureMetafields = is_array($guideSnapshot['metafields'] ?? null)
        ? $guideSnapshot['metafields']
        : (is_array($form['guide_metafields'] ?? null) ? $form['guide_metafields'] : []);
    $metafieldPlan = app(\App\Services\ProductAiGuideMetafieldService::class)
        ->planForImport($import, $guideStructureMetafields);
    $processedCount = $media->filter(fn ($m) => filled($m->processed_path))->count();
    $stepUrl = fn (string $s) => route('product-ai-import.show', ['productAiImport' => $import, 'step' => $s]);
@endphp

<div class="pai-wizard" data-pai-work-busy="{{ $import->isWorkBusy() ? '1' : '0' }}">
    <div class="pai-wiz-top">
        <a class="pai-wiz-back" href="{{ route('product-ai-import.index') }}">← All imports</a>
        <div class="pai-wiz-brand">
            <span class="pai-wiz-kicker">AVI THE JEWELER · Product AI{{ $isImprove ? ' · Improve' : '' }}</span>
            <h1>{{ $isImprove ? 'Improve' : 'Import' }} #{{ $import->id }}</h1>
            <p>
                @if(trim((string) $import->title) !== '')
                    {{ $import->title }}
                @else
                    Guided listing studio
                @endif
                <span class="pai-wiz-status">{{ $import->statusLabel() }}</span>
                @if($isImprove)
                    <span class="pai-wiz-status" style="background:#fff7ed;color:#9a3412;">Media only</span>
                @endif
            </p>
        </div>
    </div>

    @if ($import->error_message && ! $import->is_auto_mode)
        <div class="alert alert-warning">{{ $import->error_message }}</div>
    @endif
    @include('product_ai_import.partials.auto_sync_gate')
    @if ($errors->any())
        <div class="alert alert-error">
            <ul style="margin:0;padding-left:1.25rem;">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Stays visible on every step while scrolling long content --}}
    <div class="pai-wiz-sticky" id="pai-wiz-sticky">
        @include('product_ai_import.partials.bg_work_banner', ['import' => $import, 'wizardStep' => $wizardStep])
        <div id="pai-pipeline-status"
             data-run-pending-url="{{ $isImprove ? route('product-ai-import.sync-improve-media', $import) : route('product-ai-import.run-pending', $import) }}"
             data-wizard-step="{{ $wizardStep }}"
             data-shopify-linked="{{ filled($import->shopify_product_gid) ? '1' : '0' }}"
             data-improve="{{ $isImprove ? '1' : '0' }}"
             data-sync-label="{{ $isImprove ? 'Sync media' : 'Update Shopify' }}">
            @include('product_ai_import.partials.pipeline_status', ['import' => $import, 'wizardStep' => $wizardStep])
        </div>
    <nav class="pai-wiz-steps" aria-label="Import steps">
        @foreach($wizardSteps as $key => $meta)
            @php
                $i = $meta['n'];
                $done = $i < ($wizardSteps[$wizardStep]['n'] ?? 1);
                $active = $key === $wizardStep;
            @endphp
            <a href="{{ $stepUrl($key) }}"
                   class="pai-wiz-step {{ $active ? 'is-active' : '' }} {{ $done ? 'is-done' : '' }}"
                   @if($key === 'details' && ! $active && ! empty($detailsNeedsCopy)) data-pai-nav-loader="copy" @endif>
                <span class="pai-wiz-step-num">{{ $done ? '✓' : $i }}</span>
                <span class="pai-wiz-step-text">
                    <strong>{{ $meta['label'] }}</strong>
                    <small>{{ $meta['desc'] }}</small>
                </span>
            </a>
            @if(!$loop->last)
                <span class="pai-wiz-rail" aria-hidden="true"></span>
            @endif
        @endforeach
    </nav>
    </div>

    {{-- ═══════════════ STEP 1: MEDIA ═══════════════ --}}
    @if($wizardStep === 'media')
    @php
        // Same source of truth as Prepare / Sync — never a stale $media filter that shows Originals.
        $mediaStepItems = $import->shopifyMediaItems();
    @endphp
    <section class="pai-wiz-panel">
        <header class="pai-wiz-panel-head">
            <div>
                <h2>1 · Media</h2>
                <p>
                    Gallery preview of what uploads to Shopify.
                    If you chose an enhance, the original stays hidden here (still in Enhance history).
                    Change picks in Enhance / Lifestyle anytime.
                </p>
            </div>
            <div class="pai-wiz-stat">
                <strong>{{ $mediaStepItems->count() }}</strong>
                <span>for Shopify</span>
            </div>
        </header>

        @if($mediaStepItems->isEmpty())
            <p class="pai-hint">No media yet. Add images or a video below.</p>
        @else
            @php
                $galleryItems = $mediaStepItems->values();
            @endphp
            <div class="pai-wiz-sub" style="margin-top:0;padding-top:0;border-top:0;">
                <div style="display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:space-between;align-items:flex-end;margin-bottom:0.75rem;">
                    <div>
                        <h3 style="margin:0 0 0.25rem;">Media gallery</h3>
                        <p class="pai-hint" style="margin:0;">As it will appear on Shopify. Drag any tile (or use ← →) — <strong>#1</strong> is featured. Saves automatically.</p>
                    </div>
                    <p class="pai-hint pai-gallery-toast" id="pai-gallery-toast" hidden></p>
                </div>

                <form action="{{ route('product-ai-import.reorder', $import) }}" method="POST" id="pai-reorder-form"
                      data-reorder-url="{{ route('product-ai-import.reorder', $import) }}">
                    @csrf
                    <input type="hidden" name="wizard_step" value="media">
                    <div class="pai-shop-gallery" id="pai-shop-gallery" @if($canEditMedia) data-editable="1" @endif>
                        @foreach($galleryItems as $idx => $item)
                    @php
                        $viewUrl = $item->displayUrl();
                        $origUrl = $item->originalUrl();
                                $featured = $idx === 0;
                    @endphp
                            <article class="pai-shop-tile {{ $featured ? 'pai-shop-tile--featured' : '' }} {{ $item->isVideo() ? 'pai-shop-tile--video' : '' }}"
                                     data-id="{{ $item->id }}"
                                     @if($item->isVideo()) data-media-type="video" @endif
                                     @if($canEditMedia) draggable="true" @endif>
                                <span class="pai-shop-order" aria-hidden="true">{{ $idx + 1 }}</span>
                                @if($canEditMedia)
                                    <span class="pai-shop-drag-hint" title="Drag to reorder" aria-hidden="true">⠿</span>
                                @endif
                                <div class="pai-shop-tile-media"
                        @if($item->isVideo())
                                         data-pai-lightbox data-type="video" data-src="{{ $viewUrl }}" data-title="{{ $item->filename }}"
                        @else
                                         data-pai-lightbox data-type="image" data-src="{{ $viewUrl }}" data-orig="{{ $origUrl }}" data-title="{{ $item->filename }}"
                                     @endif
                                     role="button" tabindex="0">
                                    @if($item->isVideo())
                                        <video src="{{ $viewUrl }}" muted playsinline controls preload="metadata" controlslist="nodownload"></video>
                                        <span class="pai-shop-play" aria-hidden="true">
                                            <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M8 5.5v13l11-6.5L8 5.5z"/></svg>
                                        </span>
                                        <span class="pai-shop-video-badge">Video</span>
                                    @else
                                <img src="{{ $viewUrl }}" alt="{{ $item->alt_text ?: $item->filename }}">
                        @endif
                                    @if($featured)
                                        <span class="pai-shop-featured-badge">Featured</span>
                                @endif
                                    @if($item->is_ai_generated)
                                        <span class="pai-shop-mini-chip">{{ $item->isEnhance() ? 'Enhanced' : 'Lifestyle' }}</span>
                                    @elseif($import->isWornOriginalMedia($item))
                                        <span class="pai-shop-mini-chip">How it looks</span>
                                    @elseif($import->isMeasurementOriginalMedia($item))
                                        <span class="pai-shop-mini-chip">Measures</span>
                            @endif
                                </div>
                                @if($canEditMedia)
                                    <div class="pai-shop-tile-actions">
                                        <button type="button" class="pai-shop-action pai-shop-move" data-pai-move="-1" title="Move left">←</button>
                                        <button type="button" class="pai-shop-action pai-shop-move" data-pai-move="1" title="Move right">→</button>
                                        @if($item->isImage() && ! $item->is_ai_generated && ! $item->is_primary)
                                            <button type="submit" form="pai-set-primary-{{ $item->id }}" class="pai-shop-action" title="Set as featured">★</button>
                            @endif
                                        @if($item->isImage() && ! $item->is_ai_generated && ($settings->lifestyle_enabled ?? true))
                                            <button type="submit" form="pai-set-life-{{ $item->id }}" class="pai-shop-action {{ $item->is_lifestyle_source ? 'is-on' : '' }}" title="{{ $item->is_lifestyle_source ? 'Unmark lifestyle ref' : 'Use for lifestyle' }}">◎</button>
                            @endif
                                        <button type="submit" form="pai-del-media-{{ $item->id }}" class="pai-shop-action pai-shop-action--danger" onclick="return confirm('Remove this file?');" title="Remove">×</button>
                                    </div>
                                @endif
                            </article>
                        @endforeach
                        @if($canEditMedia)
                            <a href="#pai-add-media" class="pai-shop-tile pai-shop-tile--add" title="Add media">
                                <span>+</span>
                            </a>
                        @endif
                    </div>
                </form>
                        </div>

            {{-- CSRF helpers for tile action buttons that post outside the reorder field set --}}
                        @if($canEditMedia)
                @foreach($galleryItems as $item)
                    @if($item->isImage() && ! $item->is_ai_generated && ! $item->is_primary)
                        <form id="pai-set-primary-{{ $item->id }}" action="{{ route('product-ai-import.set-primary', [$import, $item]) }}" method="POST" class="pai-hidden-form">
                                            @csrf
                                            <input type="hidden" name="wizard_step" value="media">
                                        </form>
                                    @endif
                    @if($item->isImage() && ! $item->is_ai_generated && ($settings->lifestyle_enabled ?? true))
                        <form id="pai-set-life-{{ $item->id }}" action="{{ route('product-ai-import.set-lifestyle', [$import, $item]) }}" method="POST" class="pai-hidden-form">
                                            @csrf
                                            <input type="hidden" name="wizard_step" value="media">
                                        </form>
                                    @endif
                    <form id="pai-del-media-{{ $item->id }}" action="{{ route('product-ai-import.destroy-media', [$import, $item]) }}" method="POST" class="pai-hidden-form">
                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="wizard_step" value="media">
                                </form>
                @endforeach
            @endif
        @endif

        @if($canEditMedia)
            @php
                $uploadedImgCount = $import->uploadedProductImagesCount();
                $uploadedVidCount = $import->uploadedVideosCount();
                $remainImg = max(0, (int) $settings->max_images_per_import - $uploadedImgCount);
                $remainVid = max(0, (int) $settings->max_videos_per_import - $uploadedVidCount);
                $canUploadMore = $remainImg > 0 || $remainVid > 0;
            @endphp
            <div class="pai-wiz-sub pai-add-media-panel" id="pai-add-media">
                <div class="pai-add-media-head">
                    <div>
                <h3>Add more media</h3>
                        <p class="pai-hint" style="margin:0;">
                            Drop or pick files — they upload automatically. Extra photos after Shopify sync are fine; then use <strong>Update Shopify</strong>.
                        </p>
                                </div>
                    <div class="pai-add-media-quota" aria-label="Upload limits">
                        <span>Photos {{ $uploadedImgCount }}/{{ $settings->max_images_per_import }}</span>
                        <span>Video {{ $uploadedVidCount }}/{{ $settings->max_videos_per_import }}</span>
                            </div>
                        </div>
                @if($canUploadMore)
                    <form action="{{ route('product-ai-import.add-media', $import) }}"
                          method="POST"
                          enctype="multipart/form-data"
                          id="pai-add-media-form"
                          class="pai-add-media-form"
                          data-auto-upload="1">
                        @csrf
                        <input type="hidden" name="wizard_step" value="media">
                        <div class="pai-dropzone pai-dropzone--media pai-dropzone--auto" id="pai-add-media-drop">
                            <div class="pai-dropzone-hit">
                                <input
                                    type="file"
                                    name="media[]"
                                    id="add_media"
                                    class="pai-file-input"
                                    accept=".jpg,.jpeg,.png,.webp,.mp4,.mov,image/jpeg,image/png,image/webp,video/mp4,video/quicktime"
                                    multiple
                                >
                                <div class="pai-dropzone-label">
                                    <strong>Drop photos or video here</strong>
                                    <span>or click to browse · JPG, PNG, WEBP, MP4, MOV</span>
                                    <span class="pai-dropzone-remain">
                                        {{ $remainImg }} photo slot{{ $remainImg === 1 ? '' : 's' }} ·
                                        {{ $remainVid }} video slot{{ $remainVid === 1 ? '' : 's' }} left
                                    </span>
                                </div>
                            </div>
                            <div class="pai-client-previews" id="pai-add-media-preview"></div>
                            <div class="pai-add-media-status" id="pai-add-media-status" hidden>
                                <span class="pai-add-media-spinner" aria-hidden="true"></span>
                                <span id="pai-add-media-status-text">Uploading…</span>
                        </div>
                            <p class="pai-add-media-error" id="pai-add-media-error" hidden role="alert"></p>
                    </div>
                        <noscript>
                    <div class="pai-actions">
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </div>
                        </noscript>
                </form>
                @else
                    <p class="pai-hint" style="margin:0;">Upload limit reached. Remove a product photo or video to free a slot.</p>
                @endif
            </div>
        @endif
    </section>
    @endif

    {{-- ═══════════════ STEP 2: DETAILS ═══════════════ --}}
    @if($wizardStep === 'details')
    @php
        $copyAutoMessage = $copyAutoMessage ?? null;
        $titleSuggestions = is_array($form['title_suggestions'] ?? null) ? $form['title_suggestions'] : [];
        $titleSuggestions = array_values(array_filter($titleSuggestions, static function ($row) {
            return is_array($row) && trim((string) ($row['title'] ?? '')) !== '';
        }));
        $pickedTitleId = (string) ($form['title_suggestion_id'] ?? '');
        if ($pickedTitleId === '' && $titleSuggestions !== []) {
            $last = $titleSuggestions[array_key_last($titleSuggestions)] ?? null;
            $pickedTitleId = (string) ($last['id'] ?? '');
            foreach ($titleSuggestions as $opt) {
                if (($opt['id'] ?? '') === 'detailed') {
                    $pickedTitleId = 'detailed';
                    break;
                }
            }
        }
        $hasDetailsNotes = trim((string) $fv('product_details')) !== '';
        $canAutoCopy = $import->images->isNotEmpty() && $hasDetailsNotes;
    @endphp
    <section class="pai-wiz-panel"
             id="pai-details-panel"
             data-generate-url="{{ route('product-ai-import.generate-copy', $import) }}"
             data-has-suggestions="{{ $titleSuggestions !== [] ? '1' : '0' }}"
             data-has-images="{{ $import->images->isNotEmpty() ? '1' : '0' }}"
             data-needs-copy="{{ ! empty($detailsNeedsCopy) ? '1' : '0' }}"
             data-bg-busy="{{ $import->isWorkBusy() ? '1' : '0' }}">
        <header class="pai-wiz-panel-head">
            <div>
                <h2>2 · Details &amp; {{ $isImprove ? 'SEO' : 'copy' }}</h2>
                <p>
                    @if($isImprove)
                        Listing fields are read-only from Shopify. SEO is
                        @if($seoLocked)
                            <strong>locked</strong> (already filled on Shopify — never overwritten).
                        @else
                            <strong>editable</strong> because it was empty on pull — filled values sync with media.
                        @endif
                    @else
                        Paste your specs — titles, description, and SEO generate automatically from notes + photos.
                        Pick one of the 3 titles below. Yellow fields still need your confirmation.
                    @endif
                </p>
            </div>
        </header>

        @if($isImprove)
            <div class="pai-wiz-callout" style="margin-bottom:1rem;">
                Improve existing never changes title, description, SKU, pricing, metafields, collections, or status on Shopify.
                Focus on Enhance → Lifestyle → Prepare → Sync media.
                @if(! empty($improveMeta['product_status']))
                    <div style="margin-top:0.35rem;">Live status: <strong>{{ $improveMeta['product_status'] }}</strong>
                        @if(! empty($improveMeta['admin_url']))
                            · <a href="{{ $improveMeta['admin_url'] }}" target="_blank" rel="noopener">Open in Shopify</a>
                        @endif
                    </div>
                @endif
            </div>
        @endif

        @if(! $isImprove && $copyAutoMessage)
            <div class="pai-wiz-callout" style="margin-bottom:1rem;">{{ $copyAutoMessage }}</div>
        @endif

        @if(! $isImprove)
        <div class="pai-wiz-sub" style="margin-top:0;padding-top:0;border-top:0;">
            <div class="pai-listing-head-row">
                <div>
                    <h3 style="margin:0 0 0.25rem;">Product notes</h3>
                    <p class="pai-hint" style="margin:0;">
                        GemLightbox-style notes (WEIGHT, CARATS, MATERIAL, DIAMOND, PRICE…).
                        Saves as you type — copy builds itself when notes are ready.
                    </p>
                </div>
                @if($titleSuggestions !== [])
                    <button type="button" class="btn btn-secondary" id="pai-copy-refresh" title="Rebuild titles &amp; description from current notes">
                        Refresh copy
                    </button>
                @endif
            </div>
            <div class="pai-fields" style="margin-top:0.75rem;">
                    <div class="pai-field pai-field--full">
                        <label for="product_details">Product details</label>
                    <textarea id="product_details" class="pai-textarea" rows="9" maxlength="20000"
                              form="pai-listing-form"
                              name="product_details"
                              data-pai-details-notes="1"
                              placeholder="WEIGHT: 10.4g&#10;length 2.0 in&#10;COST: 1881&#10;PRICE: 2900&#10;COMPARE_AT: 3500&#10;CARATS: 5.25 CT&#10;MATERIAL: 10K&#10;DIAMOND: NATURAL&#10;VS2 clarity&#10;D diamond color">{{ $fv('product_details') }}</textarea>
                    </div>
                </div>
                    @if($import->images->isEmpty())
                <p class="pai-hint">Add photos in Media first — titles use the images for the design name.</p>
            @elseif(! $hasDetailsNotes)
                <div class="pai-wiz-callout" style="margin-top:0.85rem;">
                    Paste your product notes above. When they look complete, 3 titles + description appear here automatically.
                </div>
                    @endif
                </div>

        @if($titleSuggestions !== [])
            <div class="pai-wiz-sub pai-title-pick" id="pai-title-pick"
                 data-apply-url="{{ route('product-ai-import.apply-title-suggestion', $import) }}">
                <div class="pai-title-pick-head">
                    <div>
                        <h3>Choose a title</h3>
                        <p class="pai-hint" style="margin:0;">Three styles for the same piece — click one to apply. SEO updates with your choice.</p>
        </div>
                    <span class="pai-title-pick-badge">{{ count($titleSuggestions) }} options</span>
                </div>
                <div class="pai-title-pick-grid" role="radiogroup" aria-label="Title options">
                    @foreach($titleSuggestions as $i => $opt)
                        @php
                            $optId = (string) ($opt['id'] ?? ('opt_'.$i));
                            $optLabel = (string) ($opt['label'] ?? ('Option '.($i + 1)));
                            $optTitle = (string) ($opt['title'] ?? '');
                            $isPicked = $pickedTitleId !== '' && $pickedTitleId === $optId;
                            $letters = ['A', 'B', 'C'];
                            $letter = $letters[$i] ?? (string) ($i + 1);
                        @endphp
                        <label class="pai-title-card {{ $isPicked ? 'is-selected' : '' }}">
                            <input type="radio"
                                   name="pai_title_pick"
                                   value="{{ $optId }}"
                                   class="pai-title-card-input"
                                   data-title="{{ $optTitle }}"
                                   @checked($isPicked)>
                            <span class="pai-title-card-top">
                                <span class="pai-title-card-letter">{{ $letter }}</span>
                                <span class="pai-title-card-label">{{ $optLabel }}</span>
                                <span class="pai-title-card-check" aria-hidden="true">✓</span>
                            </span>
                            <span class="pai-title-card-text">{{ $optTitle }}</span>
                            <span class="pai-title-card-meta">{{ mb_strlen($optTitle) }} characters</span>
                        </label>
                    @endforeach
                </div>
                <p class="pai-hint pai-title-pick-toast" id="pai-title-pick-toast" hidden></p>
            </div>
        @elseif($canAutoCopy)
            <div class="pai-wiz-sub pai-copy-pending" id="pai-copy-pending">
                <div class="pai-copy-pending-card">
                    <strong>Building your listing…</strong>
                    <p>Writing 3 title options, description, and SEO from your notes and photos.</p>
                </div>
            </div>
        @endif
        @endif

        <div class="pai-wiz-sub">
            <div class="pai-listing-head-row">
            <h3>{{ $isImprove ? 'Live listing (view only)' : 'Listing fields' }}</h3>
                @if(! $isImprove || ! $seoLocked)
                    <span class="pai-hint pai-listing-autosave" id="pai-listing-autosave" aria-live="polite">{{ $isImprove ? 'SEO saves automatically' : 'Saves automatically' }}</span>
                @endif
            </div>
            <form action="{{ route('product-ai-import.update-fields', $import) }}" method="POST" class="pai-form" id="pai-listing-form" @if(! $isImprove || ! $seoLocked) data-autosave="1" @endif>
                @csrf
                @method('PUT')
                <input type="hidden" name="wizard_step" value="details">

                <div class="pai-listing-block">
                    <div class="pai-listing-block-head">
                        <h4>Product &amp; pricing</h4>
                        <p>{{ $isImprove ? 'Pulled from Shopify — not pushed back on sync.' : 'Retail title and commercial fields for Shopify. You can still edit the title manually after picking.' }}</p>
                    </div>
                <div class="pai-fields">
                        <div class="pai-field pai-field--full {{ $isImprove ? '' : $needClass('title') }}">
                        <label for="title">Title</label>
                        <input type="text" name="title" id="title" class="pai-input" value="{{ $fv('title') }}" maxlength="255" @if($isImprove) readonly @endif>
                    </div>
                    <div class="pai-field {{ $isImprove ? '' : 'pai-field--needs' }}">
                        <label for="sku">SKU @if(! $isImprove)<span class="pai-optional">(manual)</span>@endif</label>
                        <input type="text" name="sku" id="sku" class="pai-input" value="{{ $fv('sku') }}" maxlength="120" placeholder="{{ $isImprove ? '' : 'Enter before Shopify' }}" @if($isImprove) readonly @endif>
                    </div>
                    <div class="pai-field">
                        <label for="cost">Cost <span class="pai-optional">(COST)</span></label>
                        <input type="number" step="0.01" min="0" name="cost" id="cost" class="pai-input" value="{{ $fv('cost') }}" placeholder="From COST: …" @if($isImprove) readonly @endif>
                    </div>
                    <div class="pai-field">
                        <label for="price">Sale price <span class="pai-optional">(PRICE)</span></label>
                        <input type="number" step="0.01" min="0" name="price" id="price" class="pai-input" value="{{ $fv('price') }}" placeholder="From PRICE: …" @if($isImprove) readonly @endif>
                    </div>
                    <div class="pai-field">
                        <label for="compare_at_price">Compare-at <span class="pai-optional">(optional)</span></label>
                        <input type="number" step="0.01" min="0" name="compare_at_price" id="compare_at_price" class="pai-input" value="{{ $fv('compare_at_price') }}" placeholder="COMPARE_AT: … or leave blank" @if($isImprove) readonly @endif>
                    </div>
                    </div>
                </div>

                <div class="pai-listing-block">
                    <div class="pai-listing-block-head">
                        <h4>Description</h4>
                        <p>{{ $isImprove ? 'From Shopify — not overwritten on sync.' : 'Shown as customers will read it on the store (not raw HTML).' }}</p>
                    </div>
                    <div class="pai-fields">
                    <div class="pai-field pai-field--full {{ $isImprove ? '' : $needClass('description') }}">
                            <label for="description">Product description</label>
                            @if($isImprove)
                                <div class="pai-rte-surface" style="min-height:8rem;border:1px solid #e2e8f0;border-radius:10px;padding:0.85rem;background:#f8fafc;">{!! $fv('description') !!}</div>
                                <input type="hidden" name="description" id="description" value="{{ $fv('description') }}">
                            @else
                            <div class="pai-rte" data-pai-rte>
                                <div class="pai-rte-toolbar" role="toolbar" aria-label="Description formatting">
                                    <button type="button" class="pai-rte-btn" data-pai-rte-cmd="bold" title="Bold"><strong>B</strong></button>
                                    <button type="button" class="pai-rte-btn" data-pai-rte-cmd="italic" title="Italic"><em>I</em></button>
                                    <button type="button" class="pai-rte-btn" data-pai-rte-cmd="insertUnorderedList" title="Bullet list">• List</button>
                                    <span class="pai-rte-sep"></span>
                                    <button type="button" class="pai-rte-btn" data-pai-rte-cmd="removeFormat" title="Clear formatting">Clear</button>
                                    <button type="button" class="pai-rte-btn pai-rte-btn--ghost" data-pai-rte-toggle-source title="Edit HTML source">HTML</button>
                    </div>
                                <div
                                    class="pai-rte-surface"
                                    id="pai-description-editor"
                                    contenteditable="true"
                                    role="textbox"
                                    aria-multiline="true"
                                    aria-label="Product description preview"
                                >{!! $fv('description') !!}</div>
                                <textarea name="description" id="description" class="pai-textarea pai-rte-source" rows="14" maxlength="20000" hidden>{{ $fv('description') }}</textarea>
                            </div>
                            <span class="pai-hint" style="margin-top:0.4rem;">Bold key specs as needed. HTML is saved for Shopify automatically.</span>
                            @endif
                        </div>
                        @if(! $isImprove)
                        <div class="pai-field pai-field--full">
                        <label for="short_description">Short description</label>
                            <textarea name="short_description" id="short_description" class="pai-textarea pai-textarea--short" rows="3" maxlength="2000" placeholder="Punchy blurb used for SEO when meta is empty">{{ $fv('short_description') }}</textarea>
                    </div>
                        @endif
                    </div>
                </div>

                @if(! $isImprove)
                <div class="pai-listing-block">
                    <div class="pai-listing-block-head">
                        <h4>Specifications</h4>
                        <p>Facts from notes — used for metafields and SEO.</p>
                    </div>
                    <div class="pai-fields">
                    <div class="pai-field">
                        <label for="material">Material</label>
                        <input type="text" name="material" id="material" class="pai-input" value="{{ $fv('material') }}">
                    </div>
                    <div class="pai-field">
                        <label for="gold_karat">Gold karat</label>
                        <input type="text" name="gold_karat" id="gold_karat" class="pai-input" value="{{ $fv('gold_karat') }}">
                    </div>
                    <div class="pai-field">
                        <label for="gold_color">Gold color</label>
                            <input type="text" name="gold_color" id="gold_color" class="pai-input" value="{{ $fv('gold_color') }}" placeholder="Yellow / White / Rose">
                    </div>
                    <div class="pai-field">
                        <label for="diamond_type">Diamond type</label>
                        <input type="text" name="diamond_type" id="diamond_type" class="pai-input" value="{{ $fv('diamond_type') }}">
                    </div>
                    <div class="pai-field">
                        <label for="diamond_shape">Diamond shape</label>
                            <input type="text" name="diamond_shape" id="diamond_shape" class="pai-input" value="{{ $fv('diamond_shape') }}" placeholder="Round, baguette…">
                    </div>
                    <div class="pai-field">
                        <label for="carat_weight">Carat weight</label>
                        <input type="text" name="carat_weight" id="carat_weight" class="pai-input" value="{{ $fv('carat_weight') }}">
                    </div>
                    <div class="pai-field">
                        <label for="clarity">Clarity</label>
                        <input type="text" name="clarity" id="clarity" class="pai-input" value="{{ $fv('clarity') }}" placeholder="e.g. VS2">
                    </div>
                    <div class="pai-field">
                        <label for="diamond_color">Diamond color</label>
                        <input type="text" name="diamond_color" id="diamond_color" class="pai-input" value="{{ $fv('diamond_color') }}" placeholder="e.g. D">
                    </div>
                    <div class="pai-field">
                        <label for="weight">Weight (g)</label>
                        <input type="number" step="0.01" min="0" name="weight" id="weight" class="pai-input" value="{{ $fv('weight') }}">
                    </div>
                        <div class="pai-field pai-field--full">
                            <label for="tags">Tags</label>
                            <input type="text" name="tags" id="tags" class="pai-input" value="{{ $fv('tags') }}" placeholder="Comma-separated">
                        </div>
                    </div>
                </div>
                @endif

                <div class="pai-listing-block">
                    <div class="pai-listing-block-head">
                        <h4>Search engine listing</h4>
                        <p>
                            @if($isImprove && $seoLocked)
                                Locked — SEO was already set on Shopify and will not be changed.
                            @elseif($isImprove)
                                Was empty on Shopify — edit here; sync pushes SEO with media.
                            @else
                                Google-style page title and meta description (character limits below).
                            @endif
                        </p>
                    </div>
                    <div class="pai-fields">
                        <div class="pai-field pai-field--full">
                        <label for="seo_title">SEO title</label>
                            <input type="text" name="seo_title" id="seo_title" class="pai-input" value="{{ $fv('seo_title') }}" maxlength="70" data-pai-seo-counter data-pai-seo-max="70" placeholder="{{ $isImprove ? '' : 'Filled when you generate copy' }}" @if($seoLocked) readonly @endif>
                            <span class="pai-hint" style="margin-top:0.35rem;"><span data-pai-seo-count>0</span>/70 · search result title</span>
                    </div>
                        <div class="pai-field pai-field--full">
                        <label for="seo_description">SEO description</label>
                            <textarea name="seo_description" id="seo_description" class="pai-textarea pai-textarea--seo" rows="3" maxlength="155" data-pai-seo-counter data-pai-seo-max="155" placeholder="{{ $isImprove ? '' : 'Filled when you generate copy' }}" @if($seoLocked) readonly @endif>{{ $fv('seo_description') }}</textarea>
                            <span class="pai-hint" style="margin-top:0.35rem;"><span data-pai-seo-count>0</span>/155 · Google meta (~160 max)</span>
                    </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
    @endif

    {{-- ═══════════════ STEP 3: PROCESS ═══════════════ --}}
    {{-- ═══════════════ STEP 5: PREPARE (auto crop/compress/SEO) ═══════════════ --}}
    @if($wizardStep === 'prepare')
    @php
        $themeRatio = (string) ($settings->aspect_ratio ?? '1.25:1');
        $outFormat = strtoupper((string) ($settings->image_output_format ?? 'webp'));
        $prepareItems = $import->shopifyMediaItems();
        $readyCount = $prepareItems->filter(fn ($m) => $m->isShopifyPrepared())->count();
        $missingAlt = $prepareItems->filter(fn ($m) => $m->isImage() && trim((string) $m->alt_text) === '')->count();
        $prepareNote = $prepareAutoMessage ?? null;
        $prepareStaleLocal = $import->isPrepareStale();
    @endphp
    <section class="pai-wiz-panel">
        <header class="pai-wiz-panel-head">
            <div>
                <h2>5 · Prepare for Shopify</h2>
                <p>
                    Only the gallery that uploads to Shopify is prepared here (selected enhances, lifestyle, originals, video).
                    Cropped to <strong>{{ $themeRatio }}</strong>, compressed to
                    <strong>{{ $outFormat }}</strong>, and named for SEO. History versions stay unprocessed.
                </p>
            </div>
            <div class="pai-wiz-stat">
                <strong>{{ $readyCount }}</strong>
                <span>/ {{ $prepareItems->count() }} for Shopify</span>
            </div>
        </header>

        @if($prepareNote)
            <div class="pai-wiz-callout" style="margin-bottom:1rem;">{{ $prepareNote }}</div>
        @endif

        @if(filled($import->shopify_product_gid) && ($prepareStaleLocal || $import->hasPendingShopifySync()))
            <div class="pai-wiz-callout" style="margin-bottom:1rem;border-color:#93c5fd;background:#eff6ff;color:#1e3a8a;">
                Gallery changed. Use <strong>Update Shopify</strong> in the blue bar above — no need to re-prepare here first.
                Or continue to the Shopify step with the button below.
            </div>
        @elseif($prepareStaleLocal)
            <div class="pai-wiz-callout" style="margin-bottom:1rem;border-color:#e2e8f0;background:#f8fafc;color:#475569;">
                Preview of the Shopify set. Continue the wizard when ready — prepare runs automatically on create/update.
            </div>
        @endif

        <div class="pai-prepare-summary">
            <span class="pai-prepare-pill">{{ $readyCount }} ready</span>
            <span class="pai-prepare-pill">{{ $prepareItems->count() }} for Shopify</span>
            <span class="pai-prepare-pill">{{ $outFormat }}</span>
            <span class="pai-prepare-pill">{{ $themeRatio }}</span>
            @if($missingAlt > 0)
                <span class="pai-prepare-pill pai-prepare-pill--warn">{{ $missingAlt }} need alt</span>
            @else
                <span class="pai-prepare-pill pai-prepare-pill--ok">SEO alts set</span>
            @endif
            @php
                $preparePendingCount = $prepareItems->filter(fn ($m) => ! $m->isShopifyPrepared())->count();
            @endphp
            <div class="pai-prepare-actions" style="margin-left:auto;display:flex;flex-wrap:wrap;gap:0.45rem;align-items:center;">
                @if($preparePendingCount > 0)
                    <form action="{{ route('product-ai-import.process-media', $import) }}" method="POST" class="pai-prepare-more-form" data-pai-lux-loader="prepare">
                @csrf
                        <input type="hidden" name="force" value="0">
                        <input type="hidden" name="wizard_step" value="prepare">
                        <button type="submit" class="btn btn-primary" @disabled($import->isAutoRunning())
                                title="Crop/compress only Pending files. Ready files are skipped. No Enhance / Lifestyle AI.">
                            {{ $import->isBackgroundBusy() ? 'Queue prepare pending' : 'Prepare '.$preparePendingCount.' pending' }}
                        </button>
            </form>
                @endif
                <form action="{{ route('product-ai-import.process-media', $import) }}" method="POST" class="pai-prepare-more-form" data-pai-lux-loader="prepare">
                        @csrf
                        <input type="hidden" name="force" value="1">
                    <input type="hidden" name="wizard_step" value="prepare">
                    <button type="submit" class="btn btn-secondary" @disabled($prepareItems->isEmpty() || $import->isAutoRunning())
                            title="Re-run crop/compress on every Shopify file (including video). Slow — only if you need a full refresh.">
                        {{ $import->isBackgroundBusy() ? 'Queue re-prepare all' : 'Re-prepare all' }}
                        </button>
                    </form>
                </div>
        </div>

        @php
            $prepareFailItems = $prepareItems->filter(fn ($m) => filled($m->processing_error) || $m->processing_status === \App\Models\ProductAiImportMedia::PROCESSING_FAILED);
            $preparePendingVideos = $prepareItems->filter(fn ($m) => $m->isVideo() && ! $m->isShopifyPrepared());
            $preparePendingPhotos = $prepareItems->filter(fn ($m) => $m->isImage() && ! $m->isShopifyPrepared());
        @endphp
        @if($prepareFailItems->isNotEmpty() || $preparePendingVideos->isNotEmpty() || $preparePendingPhotos->isNotEmpty())
            <div class="alert alert-warning" style="margin:0 0 1rem;">
                @if($prepareFailItems->isNotEmpty())
                    <strong>Prepare failed for:</strong>
                    <ul style="margin:0.35rem 0 0;padding-left:1.2rem;">
                        @foreach($prepareFailItems as $failItem)
                            <li>#{{ $failItem->id }} {{ $failItem->isVideo() ? 'video' : 'image' }}:
                                {{ $failItem->processing_error ?: 'unknown error' }}</li>
                        @endforeach
                    </ul>
                @endif
                @if($preparePendingPhotos->isNotEmpty())
                    <p style="margin:{{ $prepareFailItems->isNotEmpty() ? '0.5rem 0 0' : '0' }};">
                        <strong>{{ $preparePendingPhotos->count() }} photo(s) still Pending</strong> —
                        click <em>Prepare {{ $preparePendingPhotos->count() }} pending</em>.
                        Crop/compress only — no Enhance or Lifestyle AI.
                    </p>
                @endif
                @if($preparePendingVideos->isNotEmpty())
                    <p style="margin:{{ ($prepareFailItems->isNotEmpty() || $preparePendingPhotos->isNotEmpty()) ? '0.5rem 0 0' : '0' }};">
                        <strong>Video still Pending</strong> — prepare letterboxes the selected clip to <strong>{{ $themeRatio }}</strong>. It does not re-run Omni.
                    </p>
                @endif
            </div>
        @endif

        @if($prepareItems->isEmpty())
            <p class="pai-hint">Nothing selected for Shopify yet. Choose enhances / lifestyle in earlier steps, or upload media.</p>
        @else
            <div class="pai-prepare-grid">
                @foreach($prepareItems as $item)
                    @php
                        $viewUrl = $item->displayUrl();
                        $isReady = $item->isShopifyPrepared();
                        $fileExt = pathinfo((string) ($item->processed_path ?: $item->filename), PATHINFO_EXTENSION);
                        if ($fileExt === '') {
                            $fileExt = $item->isVideo() ? 'mp4' : strtolower($outFormat);
                        }
                        $ext = strtoupper($fileExt);
                        $sizeKb = null;
                        if ($item->processed_size) {
                            $sizeKb = (int) round($item->processed_size / 1024);
                        } elseif ($item->original_size) {
                            $sizeKb = (int) round($item->original_size / 1024);
                        }
                        $sizeLabel = $sizeKb !== null ? ($ext.' · '.$sizeKb.' KB') : $ext;
                        $altLabel = $item->alt_text
                            ? \Illuminate\Support\Str::limit((string) $item->alt_text, 72)
                            : '—';
                    @endphp
                    <article class="pai-prepare-card {{ $isReady ? 'is-ready' : 'is-pending' }} {{ $item->isVideo() ? 'pai-prepare-card--video' : '' }}">
                        <div class="pai-prepare-media">
                            @if($item->is_primary)
                                <span class="pai-chip">Primary</span>
                            @endif
                            @if($item->is_ai_generated)
                                <span class="pai-chip pai-chip--ai">{{ $item->isEnhance() ? 'Enhanced' : 'Lifestyle' }}</span>
                            @elseif($import->isWornOriginalMedia($item))
                                <span class="pai-chip">How it looks</span>
                            @elseif($import->isMeasurementOriginalMedia($item))
                                <span class="pai-chip">Measures</span>
                            @else
                                <span class="pai-chip">Original</span>
                            @endif
                        @if($item->isVideo())
                                <span class="pai-prepare-video-badge">Video</span>
                            <button type="button" class="pai-media-open" data-pai-lightbox data-type="video" data-src="{{ $viewUrl }}" data-title="{{ $item->filename }}">
                                    <video src="{{ $viewUrl }}" muted playsinline controls preload="metadata" controlslist="nodownload"></video>
                                    <span class="pai-prepare-play" aria-hidden="true">
                                        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M8 5.5v13l11-6.5L8 5.5z"/></svg>
                                    </span>
                            </button>
                        @else
                            <button type="button" class="pai-media-open" data-pai-lightbox data-type="image" data-src="{{ $viewUrl }}" data-orig="{{ $item->originalUrl() }}" data-title="{{ $item->filename }}">
                                <img src="{{ $viewUrl }}" alt="{{ $item->alt_text ?: $item->filename }}">
                            </button>
                        @endif
                        </div>
                        <div class="pai-prepare-body">
                            <div class="pai-prepare-badges">
                                @if($item->isVideo())
                                    <span class="pai-prep-badge pai-prep-badge--video">Video</span>
                            @endif
                                @if($isReady)
                                    <span class="pai-prep-badge is-on">Ready</span>
                                @else
                                    <span class="pai-prep-badge">Pending</span>
                                @endif
                                <span class="pai-prep-badge">{{ $sizeLabel }}</span>
                                <span class="pai-prep-badge">{{ $themeRatio }}</span>
                                @if($item->isVideo() && $isReady && $item->width && $item->height)
                                    <span class="pai-prep-badge">{{ (int) $item->width }}×{{ (int) $item->height }}</span>
                                @endif
                                @if($item->isVideo() && $item->duration)
                                    <span class="pai-prep-badge">{{ number_format((float) $item->duration, 1) }}s</span>
                            @endif
                            </div>
                            <div class="pai-prepare-file" title="{{ $item->filename }}">{{ $item->filename }}</div>
                            @if(filled($item->processing_error))
                                <div class="pai-hint" style="color:#b91c1c;margin:0.25rem 0 0;font-size:0.75rem;line-height:1.35;">
                                    {{ \Illuminate\Support\Str::limit($item->processing_error, 160) }}
                                </div>
                            @endif
                            <div class="pai-prepare-alt">
                                <span class="pai-prepare-alt-label">Alt</span>
                                {{ $altLabel }}
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
        @endif
    </section>
    @endif


    {{-- ═══════════════ STEP 3: ENHANCE ═══════════════ --}}
    @if($wizardStep === 'enhance')
    @php
        // Match Media / Shopify gallery order. Do NOT sort originals by raw `position` alone:
        // after Enhance+reorder, studio originals are pushed to the tail while Worn (still in
        // the gallery as Original) keeps a low slot → Enhance showed "cómo luce" first.
        $galleryOrder = [];
        foreach ($import->shopifyMediaItems() as $gIdx => $gItem) {
            /** @var \App\Models\ProductAiImportMedia $gItem */
            if ($gItem->isEnhance() && (int) ($gItem->source_media_id ?? 0) > 0) {
                $src = (int) $gItem->source_media_id;
                if (! isset($galleryOrder[$src])) {
                    $galleryOrder[$src] = (int) $gIdx;
                }
                continue;
            }
            if ($gItem->isImage() && ! $gItem->is_ai_generated) {
                $id = (int) $gItem->id;
                if (! isset($galleryOrder[$id])) {
                    $galleryOrder[$id] = (int) $gIdx;
                }
            }
        }
        $productPhotos = $import->images()
            ->where('media_type', \App\Models\ProductAiImportMedia::TYPE_IMAGE)
            ->where('is_ai_generated', false)
            ->reorder()
            ->orderBy('position')
            ->orderBy('id')
            ->get()
            ->sortBy(static function ($m) use ($galleryOrder) {
                $id = (int) $m->id;
                $slot = $galleryOrder[$id] ?? (5000 + (int) $m->position);

                return sprintf('%010d-%010d', $slot, $id);
            })
            ->values();
        $enhances = $import->images()
            ->where('ai_provider', \App\Models\ProductAiImportMedia::PROVIDER_ENHANCE)
            ->where('media_type', \App\Models\ProductAiImportMedia::TYPE_IMAGE)
            // images() already orders position,id ASC — clear that or "Latest" becomes the oldest.
            ->reorder()
            ->orderByDesc('id')
            ->get();
        $enhancesBySource = $enhances->groupBy(fn ($m) => (int) $m->source_media_id)
            ->map(fn ($group) => $group->sortByDesc('id')->values());
        $selectedEnhanceCount = $enhances->where('is_shopify_selected', true)->count();
        $enhanceScaleService = app(\App\Services\ProductAiEnhanceService::class);
        $enhanceScaleMax = $enhanceScaleService->subjectScaleMaxPercent($import);
        $enhanceSubjectScalePct = (int) old(
            'enhance_subject_scale_pct',
            $enhanceScaleService->subjectScalePercent($import)
        );
        $enhanceSubjectScalePct = max(40, min($enhanceScaleMax, $enhanceSubjectScalePct > 0 ? $enhanceSubjectScalePct : 55));
        // Studio AI Apply count = checked photos above that have an enhance pick (not all history).
        $enhanceScaleEligibleIds = array_fill_keys(
            $enhanceScaleService->eligibleSubjectScaleSourceIds($import),
            true
        );
        $enhanceScaleCheckedIds = $enhanceScaleService->checkedEnhanceRunSourceIds($import);
        $enhanceScaleTargetCount = 0;
        foreach ($enhanceScaleCheckedIds as $srcId) {
            if (! isset($enhanceScaleEligibleIds[$srcId])) {
                continue;
            }
            $versions = $enhancesBySource[(int) $srcId] ?? collect();
            if ($versions->isEmpty()) {
                continue;
            }
            $enhanceScaleTargetCount++;
        }
        $wornScaleFlip = array_fill_keys($import->wornSkipEnhanceIds(), true);
        $formRunIds = is_array($form['enhance_run_ids'] ?? null)
            ? array_values(array_map('intval', $form['enhance_run_ids']))
            : [];
        foreach ($formRunIds as $checkedId) {
            $checkedId = (int) $checkedId;
            if ($checkedId < 1 || isset($wornScaleFlip[$checkedId])) {
                continue;
            }
            $origVersions = $enhancesBySource[$checkedId] ?? collect();
            if ($origVersions->isEmpty()) {
                $enhanceScaleTargetCount++;
            }
        }
        $productVideos = $media->where('media_type', 'video')->where('is_ai_generated', false)->values();
        $videoEnhances = $media->where('ai_provider', \App\Models\ProductAiImportMedia::PROVIDER_ENHANCE)
            ->where('media_type', 'video')
            ->sortByDesc('id')
            ->values();
        $videoEnhancesBySource = $videoEnhances->groupBy(fn ($m) => (int) $m->source_media_id)
            ->map(fn ($group) => $group->sortByDesc('id')->values());
        $videoEnhanceEnabled = $settings->videoEnhanceEnabled();
        $videoEnhancePromptValue = old('video_enhance_prompt', $settings->resolvedVideoEnhancePrompt());
        $videoTrimSeconds = $settings->videoEnhanceMaxSeconds();
        $themeW = (int) ($settings->image_target_width ?? 2000);
        $themeH = (int) ($settings->image_target_height ?? 1600);
        $themeRatio = (string) ($settings->aspect_ratio ?? '1.25:1');
        $themeCropMode = in_array((string) ($settings->image_crop_mode ?? 'contain'), ['contain', 'cover'], true)
            ? (string) $settings->image_crop_mode
            : 'contain';
        // CSS aspect-ratio from "1.25:1" or "5:4"
        $enhFrameCss = '1.25 / 1';
        if (preg_match('/^\s*(\d+(?:\.\d+)?)\s*:\s*(\d+(?:\.\d+)?)\s*$/', $themeRatio, $rm)) {
            $enhFrameCss = $rm[1].' / '.$rm[2];
        } elseif ($themeW > 0 && $themeH > 0) {
            $enhFrameCss = $themeW.' / '.$themeH;
        }
        $enhScaleFamily = app(\App\Services\ProductAiEnhanceService::class)->subjectScaleCategoryMeta($import)['category'] ?? 'other';
        $enhIsPendants = $enhScaleFamily === 'pendants';
    @endphp
    <section class="pai-wiz-panel {{ $themeCropMode === 'cover' ? 'is-enh-cover' : 'is-enh-contain' }} {{ $enhIsPendants ? 'is-enh-pendants' : '' }}" style="--pai-enh-frame: {{ $enhFrameCss }};">
        <header class="pai-wiz-panel-head">
            <div>
                <h2>3 · Enhance</h2>
                <p>
                    Optional polish on <strong>original</strong> photos and video: same piece — better lighting/sharpness only.
                    Photos: OpenAI / Google. Video: Google Omni (trim ~{{ number_format($videoTrimSeconds, 1) }}s, no compress until Prepare).
                </p>
            </div>
            <div class="pai-wiz-stat">
                <strong id="pai-enh-selected-count">{{ $selectedEnhanceCount }}</strong>
                <span>selected for Shopify</span>
            </div>
        </header>

        @if(!($settings->enhance_enabled ?? true) && ! $videoEnhanceEnabled)
            <p class="pai-hint">Enhance is disabled in Settings. Skip to Lifestyle or re-enable it.</p>
        @elseif($productPhotos->isEmpty() && $productVideos->isEmpty())
            <div class="pai-wiz-callout">
                No product photos or video yet. <a href="{{ $stepUrl('media') }}">Upload in Media</a> first.
            </div>
        @else
            @if(($settings->enhance_enabled ?? true) && $productPhotos->isNotEmpty())
            @php
                // Saved enhance-run pick (null = first visit → all selected). Survives refresh.
                $enhanceRunIdsRaw = $form['enhance_run_ids'] ?? null;
                $enhanceRunIdsSaved = is_array($enhanceRunIdsRaw);
                $enhanceRunIds = $enhanceRunIdsSaved
                    ? array_values(array_map('intval', $enhanceRunIdsRaw))
                    : [];
                $wornSkipEnhanceIds = $import->aiWornTipIds();
                $measurementSkipEnhanceIds = $import->measurementSkipEnhanceIds();
                $wornAiTipIds = $wornSkipEnhanceIds;
                $measurementAiTipIds = $measurementSkipEnhanceIds;
                $forcedEnhanceIds = $import->merchantForcedEnhanceIds();
                $allPhotoIds = $productPhotos->pluck('id')->map(fn ($id) => (int) $id)->all();
                if (! $enhanceRunIdsSaved) {
                    $skipFlip = array_fill_keys(array_merge($wornSkipEnhanceIds, $measurementSkipEnhanceIds), true);
                    $enhanceRunIds = array_values(array_filter(
                        $allPhotoIds,
                        static fn (int $id) => ! isset($skipFlip[$id])
                    ));
                }
                $merchantPicksForPick = $import->merchantEnhancePicksMap();
                // Pick grid: Shopify-selected enhances first, thumb = enhanced version when chosen for sync.
                $productPhotosForPick = $productPhotos->values()->sortBy(static function ($m) use ($enhancesBySource, $merchantPicksForPick, $galleryOrder) {
                    $id = (int) $m->id;
                    $versions = $enhancesBySource[$id] ?? collect();
                    $pick = array_key_exists($id, $merchantPicksForPick) ? (int) $merchantPicksForPick[$id] : null;
                    $hasShopifyEnhance = false;
                    if ($pick !== null) {
                        $hasShopifyEnhance = $pick > 0 && (bool) $versions->firstWhere('id', $pick);
                    } else {
                        $hasShopifyEnhance = (bool) $versions->firstWhere('is_shopify_selected', true);
                    }
                    $slot = $galleryOrder[$id] ?? (5000 + (int) $m->position);

                    // 0 = already chosen enhance for Shopify (top); 1 = rest
                    return sprintf('%d-%010d-%010d', $hasShopifyEnhance ? 0 : 1, $slot, $id);
                })->values();
            @endphp
            <form action="{{ route('product-ai-import.enhance-media', $import) }}" method="POST" class="pai-form" id="pai-enhance-form" data-pai-lux-loader="enhance"
                  data-enh-run-pick-url="{{ route('product-ai-import.enhance-run-pick', $import) }}">
                @csrf
                <input type="hidden" name="wizard_step" value="enhance">

                <div class="pai-wiz-sub" style="margin-top:0;padding-top:0;border-top:0;">
                    <div style="display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:space-between;align-items:flex-start;margin-bottom:0.85rem;">
                        <div>
                            <h3>Photos · Select to enhance</h3>
                            <p class="pai-hint" style="margin-bottom:0;">
                                Unchecked photos are skipped — even with OpenAI/Google batch. Selection is saved if you refresh.
                                Photos already chosen for Shopify show their <strong>Enhanced</strong> preview first (top).
                                Or enhance <strong>one photo at a time</strong> below.
                                AI may tag Worn / Measures as a hint (auto-unchecked). If it is wrong, <strong>check the photo</strong> — Enhance will run on it.
                                @if(! $import->isImproveExisting())
                                    New Import has no “how it looks” photos yet — Worn tags are cleared automatically.
                                @endif
                            </p>
                        </div>
                        <div class="pai-actions" style="margin:0;">
                            <button type="button" class="btn btn-secondary" id="pai-enh-select-all">Select all</button>
                            <button type="button" class="btn btn-secondary" id="pai-enh-select-none">Select none</button>
                        </div>
                    </div>
                    <div class="pai-media-grid pai-media-grid--lux pai-life-pick-grid" id="pai-enhance-pick-grid">
                        @foreach($productPhotosForPick as $item)
                            @php
                                $itemEnhanceVersions = ($enhancesBySource[(int) $item->id] ?? collect());
                                $pickId = array_key_exists((int) $item->id, $merchantPicksForPick)
                                    ? (int) $merchantPicksForPick[(int) $item->id]
                                    : null;
                                $shopifyEnhance = null;
                                if ($pickId !== null) {
                                    $shopifyEnhance = $pickId > 0
                                        ? $itemEnhanceVersions->firstWhere('id', $pickId)
                                        : null;
                                } else {
                                    $shopifyEnhance = $itemEnhanceVersions->firstWhere('is_shopify_selected', true);
                                }
                                $pickThumbUrl = $shopifyEnhance
                                    ? ($shopifyEnhance->originalUrl() ?: $shopifyEnhance->displayUrl())
                                    : ($item->originalUrl() ?: $item->displayUrl());
                                $pickThumbTitle = $shopifyEnhance
                                    ? ('Enhanced #'.$shopifyEnhance->id.($shopifyEnhance->engineLabel() ? ' · '.$shopifyEnhance->engineLabel() : ''))
                                    : ($item->filename ?: 'Photo');
                                $isWornSkip = in_array((int) $item->id, $wornSkipEnhanceIds, true);
                                $isMeasSkip = in_array((int) $item->id, $measurementSkipEnhanceIds, true);
                                $isLifeRefSkip = (bool) $item->is_lifestyle_source
                                    && ! $isWornSkip
                                    && ! in_array((int) $item->id, $forcedEnhanceIds, true);
                                $isWornTip = $isWornSkip && $itemEnhanceVersions->isEmpty();
                                $isMeasTip = $isMeasSkip && $itemEnhanceVersions->isEmpty();
                                $isSpecialSkip = $isWornSkip || $isMeasSkip || $isLifeRefSkip;
                                $forcedEnhance = in_array((int) $item->id, $forcedEnhanceIds, true);
                                // Special skips start unchecked unless merchant forced them, or they are in saved run pick.
                                $runChecked = $forcedEnhance
                                    || (! $isSpecialSkip && in_array((int) $item->id, $enhanceRunIds, true))
                                    || ($isSpecialSkip && $enhanceRunIdsSaved && in_array((int) $item->id, $enhanceRunIds, true));
                            @endphp
                            <div class="pai-life-pick {{ $runChecked ? 'is-selected' : '' }} {{ $shopifyEnhance ? 'has-shopify-enhance' : '' }} {{ $isSpecialSkip && ! $runChecked ? 'is-worn-skip' : '' }} {{ $isMeasSkip && ! $runChecked ? 'is-meas-skip' : '' }}">
                                <label class="pai-life-pick-main">
                                    <input type="checkbox"
                                           name="enhance_refs[]"
                                           value="{{ $item->id }}"
                                           class="pai-enh-pick-input pai-life-pick-input"
                                           data-has-enhance="{{ $itemEnhanceVersions->isNotEmpty() ? '1' : '0' }}"
                                           data-scale-ok="{{ isset($enhanceScaleEligibleIds[(int) $item->id]) ? '1' : '0' }}"
                                           data-meas-scale="{{ $isMeasSkip ? '1' : '0' }}"
                                           data-worn-skip="{{ $isWornSkip ? '1' : '0' }}"
                                           @checked($runChecked)>
                                    <span class="pai-life-pick-check" aria-hidden="true">✓</span>
                                    @if($item->is_primary)<span class="pai-chip">Primary</span>@endif
                                    @if($shopifyEnhance)<span class="pai-chip pai-chip--enhance" title="This Enhanced version is chosen for Shopify sync">Shopify · Enhanced</span>@endif
                                    @if($isWornTip)<span class="pai-chip pai-chip--worn" title="AI guessed worn/lifestyle — studio packshots are often wrong; check or use Only this">Worn · AI tip</span>@endif
                                    @if($isMeasTip)<span class="pai-chip pai-chip--meas" title="AI suggested skip — check the box to enhance anyway">Measures · AI tip</span>@endif
                                    <span class="pai-life-pick-thumb">
                                        <img src="{{ $pickThumbUrl }}" alt="{{ $pickThumbTitle }}">
                                    </span>
                                    <span class="pai-life-pick-meta">{{ \Illuminate\Support\Str::limit($pickThumbTitle, 32) }}</span>
                                </label>
                                <div class="pai-life-pick-actions">
                                    <button type="button" class="pai-life-pick-view" data-pai-lightbox data-type="image" data-src="{{ $pickThumbUrl }}" data-title="{{ $pickThumbTitle }}">View</button>
                                    <button type="submit"
                                            form="pai-enh-one-{{ $item->id }}"
                                            class="pai-life-pick-one btn btn-secondary"
                                            title="Enhance only this photo (overrides Worn/Measures tip)">Only this</button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <p class="pai-hint" id="pai-enh-run-pick-toast" style="margin:0.55rem 0 0;" aria-live="polite"></p>
                </div>

                <div class="pai-wiz-sub">
                    <h3>2 · Enhance prompt</h3>
                    <p class="pai-hint">Locked: same design + same background (white stays white). Only polish sparkle/sharpness. Theme crop is in Prepare, not here.</p>
                    <textarea name="enhance_prompt" id="enhance_prompt" class="pai-textarea" rows="8" maxlength="20000" required>{{ $enhancePromptValue }}</textarea>
                    <label for="pai-prompt-extra" class="pai-hint" style="display:block;margin:0.75rem 0 0.35rem;font-weight:600;color:#374151;">
                        Extra notes for this run (optional)
                    </label>
                    <textarea name="prompt_extra" id="pai-prompt-extra" class="pai-textarea" rows="2" maxlength="4000" placeholder="Leave blank to use Settings prompt only. Example: la cara del león es white gold / white diamonds">{{ old('prompt_extra') }}</textarea>
                    <p class="pai-hint" style="margin-top:0.35rem;">Spanish or English OK. Blank = default Settings prompt. Filled = Settings prompt + your notes (OpenAI and Google).</p>
                    <input type="hidden" name="image_ai_provider" id="pai-enh-batch-provider" value="{{ $settings->imageAiProvider() ?: 'openai' }}">
                    <input type="hidden" name="enhance_subject_scale_pct" id="pai-enh-scale-pct-batch" value="{{ $enhanceSubjectScalePct }}">
                    {{-- Always-enabled: never rely on submit-button name/value (disabled submitters are omitted from POST). --}}
                    <input type="hidden" name="pai_enh_run" id="pai-enh-run-value" value="">
                    <div class="pai-actions pai-ai-provider-row">
                        <button type="submit" class="btn btn-primary" data-pai-enh-run="openai" id="pai-enh-all-openai">
                            Enhance selected with OpenAI
                        </button>
                        <button type="submit" class="btn btn-secondary" data-pai-enh-run="google" id="pai-enh-all-google">
                            Enhance selected with Google
                        </button>
                    </div>
                    <p class="pai-hint" style="margin-top:0.45rem;">
                        Runs only the <strong>checked</strong> photos above with that AI. Unchecked stay untouched.
                        Use <strong>Only this</strong> / each card’s Re-enhance for one at a time.
                    </p>
                </div>
            </form>

            {{-- One-photo enhance forms (outside batch form; prompt + provider + notes copied on submit) --}}
            @foreach($productPhotos as $item)
                <form id="pai-enh-one-{{ $item->id }}"
                      action="{{ route('product-ai-import.enhance-media', $import) }}"
                      method="POST"
                      class="pai-hidden-form pai-enh-one-form"
                      data-pai-lux-loader="enhance">
                    @csrf
                    <input type="hidden" name="wizard_step" value="enhance">
                    <input type="hidden" name="enhance_refs[]" value="{{ $item->id }}">
                    <input type="hidden" name="enhance_prompt" value="" class="pai-enh-one-prompt">
                    <input type="hidden" name="prompt_extra" value="" class="pai-enh-one-extra">
                    <input type="hidden" name="image_ai_provider" value="{{ $settings->imageAiProvider() ?: 'openai' }}" class="pai-enh-one-provider">
                    <input type="hidden" name="enhance_subject_scale_pct" value="{{ $enhanceSubjectScalePct }}" class="pai-enh-one-scale">
                </form>
            @endforeach

            <div class="pai-enh-scale-bar" id="pai-enhance-scale">
                <div class="pai-enh-scale-copy">
                    <span class="pai-enh-scale-label">Product scale</span>
                    <span class="pai-enh-scale-value" id="pai-enh-scale-value">{{ $enhanceSubjectScalePct }}%</span>
                </div>
                <input type="range"
                       id="pai-enh-scale-range"
                       class="pai-enh-scale-range"
                       min="40"
                       max="{{ $enhanceScaleMax }}"
                       step="1"
                       value="{{ $enhanceSubjectScalePct }}"
                       aria-label="Product scale percent">
                <form action="{{ route('product-ai-import.enhance-apply-scale', $import) }}"
                      method="POST"
                      class="pai-enh-scale-apply-form"
                      id="pai-enh-scale-apply-form"
                      onsubmit="return confirm('Apply {{ $enhanceSubjectScalePct }}% to Primary, match other checked AI photos, and scale the measurement original (no AI)?\n\nChecked studio AI + checked measures · skips worn.');">
                    @csrf
                    <input type="hidden" name="wizard_step" value="enhance">
                    <input type="hidden" name="enhance_subject_scale_pct" id="pai-enh-scale-pct-apply" value="{{ $enhanceSubjectScalePct }}">
                    <div id="pai-enh-scale-refs-host" aria-hidden="true"></div>
                    <button type="submit"
                            class="btn btn-secondary"
                            id="pai-enh-scale-apply-btn"
                            data-scale-count="{{ $enhanceScaleTargetCount }}"
                            @disabled($enhanceScaleTargetCount < 1)
                            title="{{ $enhanceScaleTargetCount < 1 ? 'Check studio photos above that already have AI enhance' : 'Primary → % · others match Primary fill — no AI' }}">
                        Apply scale to AI photos{{ $enhanceScaleTargetCount > 0 ? ' ('.$enhanceScaleTargetCount.')' : '' }}
                    </button>
                </form>
                    <p class="pai-hint pai-enh-scale-hint">Primary gets the % · other checked photos match that size · measures get the same scale (original, no AI) · skips worn</p>
            </div>

            <div class="pai-wiz-sub" id="pai-enhance-compare"
                 data-enh-pick-url="{{ route('product-ai-import.enhance-selection', $import) }}">
                <div style="display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:space-between;align-items:flex-start;margin-bottom:0.85rem;">
                    <div>
                        <h3>3 · Compare &amp; choose for Shopify</h3>
                        <p class="pai-hint" style="margin-bottom:0;">
                            Click <strong>Original</strong> or an AI version — the page reloads and must show
                            <strong>Shopify → Original</strong> (or Enhanced #…). Only then open Prepare:
                            that photo must show an <strong>Original</strong> badge, not Enhanced.
                        </p>
                    </div>
                </div>

                <p class="pai-hint pai-enh-toast" id="pai-enh-toast" hidden></p>
                <div class="pai-enh-pairs">
                    @foreach($productPhotos as $source)
                        @php
                            $versions = ($enhancesBySource[(int) $source->id] ?? collect())->values();
                            $latestEnhanceId = (int) ($versions->first()->id ?? 0);
                            $isWornTip = in_array((int) $source->id, $wornAiTipIds, true) && $versions->isEmpty();
                            $isMeasTip = in_array((int) $source->id, $measurementAiTipIds, true) && $versions->isEmpty();
                            $isWornSource = $isWornTip;
                            $isMeasSource = $isMeasTip;
                            $isSpecialSource = $isWornSource || $isMeasSource;
                            $merchantPicks = $import->merchantEnhancePicksMap();
                            $sourcePick = array_key_exists((int) $source->id, $merchantPicks)
                                ? (int) $merchantPicks[(int) $source->id]
                                : null;
                            if ($sourcePick !== null) {
                                $selectedVer = $sourcePick > 0
                                    ? $versions->firstWhere('id', $sourcePick)
                                    : null;
                                $usingEnhanced = $sourcePick > 0 && $selectedVer;
                            } else {
                                $selectedVer = $versions->firstWhere('is_shopify_selected', true);
                                $usingEnhanced = (bool) $selectedVer;
                            }
                            $preview = $selectedVer ?: $versions->first();
                            $versionTotal = $versions->count();
                            $sourceCompareUrl = $source->originalUrl() ?: $source->displayUrl();
                            $previewCompareUrl = $preview
                                ? ($preview->originalUrl() ?: $preview->displayUrl())
                                : null;
                        @endphp
                        <div class="pai-enh-pair {{ $usingEnhanced ? 'is-using-enhanced' : '' }} {{ $preview ? '' : 'pai-enh-pair--pending' }} {{ $isWornSource ? 'pai-enh-pair--worn' : '' }} {{ $isMeasSource ? 'pai-enh-pair--meas' : '' }}"
                             id="pai-enh-pair-{{ $source->id }}"
                             data-enh-pair
                             data-source-id="{{ $source->id }}">
                            <div class="pai-enh-pair-head">
                                <strong>{{ \Illuminate\Support\Str::limit($source->filename ?: ('Photo #'.$source->id), 42) }}</strong>
                                @if($source->is_primary)<span class="pai-chip" style="position:static;">Primary</span>@endif
                                @if($isWornTip)<span class="pai-chip pai-chip--worn" style="position:static;" title="AI guessed worn/lifestyle — ignore if this is a studio packshot">Worn · AI tip</span>@endif
                                @if($isMeasTip)<span class="pai-chip pai-chip--meas" style="position:static;">Measures · AI tip</span>@endif
                                <span class="pai-enh-pair-status">
                                    @if($usingEnhanced)
                                        Shopify → Enhanced #{{ $selectedVer->id }}@if($selectedVer->engineLabel()) · {{ $selectedVer->engineLabel() }}@endif
                                    @elseif($isSpecialSource && ! $preview)
                                        AI tip: keep Original — or Enhance below if wrong
                                    @elseif($preview)
                                        Shopify → Original
                                    @else
                                        Not enhanced yet
                                    @endif
                                </span>
                                <div class="pai-enh-one-controls">
                                    <label class="pai-ai-provider-label pai-ai-provider-label--compact">
                                        <span class="pai-sr-only">AI for this photo</span>
                                        <select class="pai-input pai-select pai-ai-provider-select pai-enh-card-provider"
                                                data-enh-one-form="pai-enh-one-{{ $source->id }}"
                                                title="Choose OpenAI or Google for this re-enhance">
                                            <option value="openai" @selected(($settings->imageAiProvider() ?: 'openai') === 'openai')>OpenAI</option>
                                            <option value="google" @selected($settings->imageAiProvider() === 'google')>Google</option>
                                        </select>
                                    </label>
                                    <button type="submit"
                                            form="pai-enh-one-{{ $source->id }}"
                                            class="btn btn-primary pai-enh-one-btn"
                                            title="Run AI enhance only for this photo (overrides Worn/Measures tip)">
                                        {{ $preview ? 'Re-enhance this photo' : 'Enhance this photo' }}
                                    </button>
                                </div>
                            </div>
                            <div class="pai-enh-card-notes">
                                <label class="pai-hint" for="pai-enh-extra-{{ $source->id }}" style="display:block;margin:0 0 0.3rem;font-weight:600;color:#374151;">
                                    Extra notes for this photo (optional)
                                </label>
                                <textarea id="pai-enh-extra-{{ $source->id }}"
                                          class="pai-textarea pai-enh-card-extra"
                                          data-enh-one-form="pai-enh-one-{{ $source->id }}"
                                          rows="2"
                                          maxlength="4000"
                                          placeholder="Blank = Settings prompt only. Ex: la cara es white gold"></textarea>
                            </div>

                            <p class="pai-enh-frame-caption">Shopify frame {{ $themeRatio }} · contain + white pad{{ ! empty($enhIsPendants) ? ' (pendants: top-aligned, chain at top)' : '' }} — Prepare keeps Enhance framing</p>
                            <div class="pai-enh-pair-grid">
                                <article class="pai-enh-side">
                                    <div class="pai-enh-side-label">
                                        Original
                                        <span class="pai-enh-frame-badge">{{ $themeRatio }}</span>
                                    </div>
                                    <div class="pai-enh-frame pai-enh-frame--{{ $themeCropMode }}">
                                        <button type="button" class="pai-media-open" data-pai-lightbox data-type="image" data-src="{{ $sourceCompareUrl }}" data-orig="{{ $source->originalUrl() }}" data-title="Original {{ $source->filename }}">
                                            <img src="{{ $sourceCompareUrl }}" alt="Original">
                                            <span class="pai-media-zoom">View</span>
                                        </button>
                                    </div>
                                </article>
                                <article class="pai-enh-side pai-enh-side--ai">
                                    <div class="pai-enh-side-label">
                                        Enhanced preview
                                        @if($preview)
                                            <span class="pai-enh-preview-tag" data-enh-preview-tag>
                                                @if($preview->id === $versions->first()->id) Latest @else #{{ $preview->id }} @endif
                                                @if($preview->engineLabel()) · {{ $preview->engineLabel() }}@endif
                                            </span>
                                        @endif
                                        <span class="pai-enh-frame-badge">{{ $themeRatio }}</span>
                                    </div>
                                    @if($preview)
                                        @php
                                            $editTarget = $selectedVer ?: $preview;
                                            $enhEditProvider = $editTarget->engineKey() ?: ($settings->imageAiProvider() ?: 'openai');
                                        @endphp
                                        <div class="pai-enh-frame pai-enh-frame--{{ $themeCropMode }}">
                                            <button type="button"
                                                    class="pai-media-open"
                                                    data-enh-preview-open
                                                    data-pai-lightbox
                                                    data-type="image"
                                                    data-src="{{ $previewCompareUrl }}"
                                                    data-orig="{{ $preview->originalUrl() }}"
                                                    data-title="Enhanced {{ $preview->filename }}">
                                                <img src="{{ $previewCompareUrl }}" alt="Enhanced" data-enh-preview-img>
                                                <span class="pai-media-zoom">View</span>
                                            </button>
                                        </div>
                                        <div class="pai-enh-edit-row">
                                            <button type="button"
                                                    class="btn btn-secondary pai-ai-edit-open"
                                                    data-pai-ai-edit
                                                    data-edit-kind="enhance"
                                                    data-edit-source-id="{{ $source->id }}"
                                                    data-edit-url="{{ route('product-ai-import.edit-enhance', [$import, $editTarget]) }}"
                                                    data-edit-thumb="{{ $editTarget->originalUrl() ?: $editTarget->displayUrl() }}"
                                                    data-edit-provider="{{ $enhEditProvider }}"
                                                    data-edit-title="Edit enhance #{{ $editTarget->id }}">
                                                Edit with AI
                                            </button>
                                            <span class="pai-hint" style="margin:0;">Edits the Shopify-selected version (or preview). New version is added — Settings prompt unchanged.</span>
                                        </div>
                                    @else
                                        <div class="pai-enh-frame pai-enh-frame--{{ $themeCropMode }} pai-enh-empty">
                                            @if($isSpecialSource)
                                                <p>{{ $isMeasSource ? 'AI tip: measurement — Original by default.' : 'AI tip: worn / how it looks — Original by default.' }}</p>
                                                <p class="pai-hint" style="margin:0.35rem 0 0;">Wrong? Enhance anyway:</p>
                                            @else
                                                <p>No AI version yet.</p>
                                            @endif
                                            <button type="submit" form="pai-enh-one-{{ $source->id }}" class="btn btn-primary">Enhance this photo</button>
                                        </div>
                                    @endif
                                </article>
                            </div>

                            @if($preview && ! $isSpecialSource)
                                <div class="pai-enh-versions">
                                    <div class="pai-enh-versions-head">
                                        <span>Choose for Shopify</span>
                                        <span class="pai-hint" style="margin:0;">{{ $versionTotal }} version{{ $versionTotal === 1 ? '' : 's' }} · click to save · Edit with AI on any version</span>
                                    </div>
                                    <div class="pai-enh-version-rail" role="group" aria-label="Enhance version for photo {{ $source->id }}">
                                        <form method="POST"
                                              action="{{ route('product-ai-import.enhance-selection', $import) }}"
                                              class="pai-enh-pick-form"
                                              data-enh-pick-form>
                                            @csrf
                                            <input type="hidden" name="source_id" value="{{ $source->id }}">
                                            <input type="hidden" name="enhance_id" value="0">
                                            <input type="hidden" name="wizard_step" value="enhance">
                                            <button type="submit"
                                                    class="pai-enh-version pai-enh-version--original {{ ! $usingEnhanced ? 'is-active' : '' }}"
                                                    title="Use original (No AI) on Shopify">
                                                <span class="pai-enh-version-frame">
                                                    <img src="{{ $sourceCompareUrl }}" alt="Keep original">
                                                </span>
                                                <span class="pai-enh-version-meta">
                                                    <strong>Original</strong>
                                                    <em>No AI</em>
                                                </span>
                                            </button>
                                        </form>

                                        @foreach($versions as $idx => $ver)
                                            @php
                                                $isLatest = $latestEnhanceId > 0 && (int) $ver->id === $latestEnhanceId;
                                                $verLabel = $isLatest ? 'Latest' : 'v'.($versionTotal - $idx);
                                                $when = $ver->created_at
                                                    ? $ver->created_at->timezone(config('app.deals_display_timezone', 'America/New_York'))->format('M j, g:i A')
                                                    : '';
                                                $verEngine = $ver->engineLabel();
                                                $verCompareUrl = $ver->originalUrl() ?: $ver->displayUrl();
                                                $verIsSelected = $selectedVer && (int) $selectedVer->id === (int) $ver->id;
                                                $verEditProvider = $ver->engineKey() ?: ($settings->imageAiProvider() ?: 'openai');
                                            @endphp
                                            <form method="POST"
                                                  action="{{ route('product-ai-import.enhance-selection', $import) }}"
                                                  class="pai-enh-pick-form"
                                                  data-enh-pick-form>
                                                @csrf
                                                <input type="hidden" name="source_id" value="{{ $source->id }}">
                                                <input type="hidden" name="enhance_id" value="{{ $ver->id }}">
                                                <input type="hidden" name="wizard_step" value="enhance">
                                                <button type="submit"
                                                        class="pai-enh-version {{ $verIsSelected ? 'is-active' : '' }} {{ $isLatest ? 'pai-enh-version--latest' : '' }}"
                                                        title="Use {{ $verLabel }} on Shopify">
                                                    <span class="pai-enh-version-frame">
                                                        @if($isLatest)<span class="pai-enh-version-badge">Latest</span>@endif
                                                        @if($verEngine !== '')
                                                            <span class="pai-enh-engine-badge pai-enh-engine-badge--{{ $ver->engineKey() }}">{{ $verEngine }}</span>
                                                        @endif
                                                        <img src="{{ $verCompareUrl }}" alt="{{ $verLabel }}">
                                                    </span>
                                                    <span class="pai-enh-version-meta">
                                                        <strong>{{ $verLabel }}</strong>
                                                        <em>{{ $verEngine !== '' ? $verEngine.' · ' : '' }}{{ $when !== '' ? $when : '#'.$ver->id }}</em>
                                                    </span>
                                                </button>
                                                <button type="button"
                                                        class="pai-enh-version-edit pai-ai-edit-open"
                                                        data-pai-ai-edit
                                                        data-edit-kind="enhance"
                                                        data-edit-source-id="{{ $source->id }}"
                                                        data-edit-url="{{ route('product-ai-import.edit-enhance', [$import, $ver]) }}"
                                                        data-edit-thumb="{{ $verCompareUrl }}"
                                                        data-edit-provider="{{ $verEditProvider }}"
                                                        data-edit-title="Edit enhance #{{ $ver->id }}"
                                                        title="Edit this version with AI">✎</button>
                                                <button type="button"
                                                        class="pai-enh-version-del"
                                                        data-delete-url="{{ route('product-ai-import.destroy-media', [$import, $ver]) }}"
                                                        data-enhance-id="{{ $ver->id }}"
                                                        title="Delete this version">×</button>
                                            </form>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
            @endif {{-- photos enhance block --}}

            @if($videoEnhanceEnabled && $productVideos->isNotEmpty())
            @php
                $vehForm = is_array($import->form_data) ? $import->form_data : [];
                $vehLast = is_array($vehForm['video_enhance_last'] ?? null) ? $vehForm['video_enhance_last'] : null;
                $omniQuotaService = app(\App\Services\ProductAiOmniQuotaService::class);
                // Prefer controller snapshot, but always re-derive from DB failure so UI locks even if cache is empty.
                $omniQuota = $omniQuotaService->snapshotForImport($vehLast);
                $omniBlocked = $omniQuotaService->isHardBlocked();

                $vehBg = $import->backgroundJob();
                $vehBgKind = is_array($vehBg) ? (string) ($vehBg['kind'] ?? '') : '';
                $vehBgStatus = is_array($vehBg) ? (string) ($vehBg['status'] ?? '') : '';
                $vehBgMsg = is_array($vehBg) ? (string) ($vehBg['message'] ?? '') : '';
                $vehRunning = $import->isBackgroundBusy() && $vehBgKind === 'video_enhance';

                $vehFlash = session('error') ?: session('warning') ?: session('success');
                $vehFlashType = session('error') ? 'error' : (session('warning') ? 'warning' : (session('success') ? 'success' : ''));

                // Prefer live/failed job message, then last Omni result, then session flash.
                if ($vehRunning) {
                    $vehFlash = $vehBgMsg !== '' ? $vehBgMsg : 'Enhancing video with Google Omni — you can scroll or open other steps.';
                    $vehFlashType = 'progress';
                } elseif ($vehBgKind === 'video_enhance' && $vehBgStatus === 'failed' && $vehBgMsg !== '') {
                    $vehFlash = $vehBgMsg;
                    $vehFlashType = 'error';
                } elseif (is_array($vehLast) && trim((string) ($vehLast['message'] ?? '')) !== '' && $vehFlashType !== 'success') {
                    if (! session('success') && ! session('warning')) {
                        $vehFlash = (string) $vehLast['message'];
                        $vehFlashType = ! empty($vehLast['ok']) ? 'success' : 'error';
                    }
                } elseif (! $vehFlash && filled($import->error_message) && str_contains(strtolower((string) $import->error_message), 'video')) {
                    $vehFlash = (string) $import->error_message;
                    $vehFlashType = 'error';
                }

                $vehAutoIssues = is_array($vehForm['auto_issues'] ?? null) ? $vehForm['auto_issues'] : [];
                if ((! $vehFlash || $vehFlashType === 'success')
                    && ! $import->hasAiEnhancedVideo()
                    && ! empty($vehAutoIssues['video_enhance_error'])
                    && (int) ($vehAutoIssues['video_enhance_ok'] ?? 0) < 1) {
                    $vehFlash = (string) $vehAutoIssues['video_enhance_error'];
                    $vehFlashType = 'warning';
                }

                $vehRetryHint = '';
                if (is_array($vehLast) && trim((string) ($vehLast['retry_hint'] ?? '')) !== '') {
                    $vehRetryHint = (string) $vehLast['retry_hint'];
                } elseif (! empty($vehAutoIssues['video_enhance_retry_hint'])) {
                    $vehRetryHint = (string) $vehAutoIssues['video_enhance_retry_hint'];
                }
                $vehCanRetry = is_array($vehLast)
                    ? (array_key_exists('can_retry', $vehLast) ? (bool) $vehLast['can_retry'] : null)
                    : (isset($vehAutoIssues['video_enhance_can_retry']) ? (bool) $vehAutoIssues['video_enhance_can_retry'] : null);
                $vehRetryWait = is_array($vehLast)
                    ? (bool) ($vehLast['wait'] ?? false)
                    : (bool) ($vehAutoIssues['video_enhance_retry_wait'] ?? false);

                // Never show a stale Omni pause NOTICE. Live meter/banner owns that story.
                // Old Auto runs left “quota lock until 7:59 PM” in form_data even after the lock expired.
                $vehFlashIsQuota = is_string($vehFlash) && $omniQuotaService->isQuotaFailureMessage($vehFlash);
                $vehLastIsQuota = is_array($vehLast)
                    && (
                        ($vehLast['retry_code'] ?? '') === 'quota'
                        || $vehRetryWait
                        || $omniQuotaService->isQuotaFailureMessage((string) ($vehLast['message'] ?? ''))
                    );
                $vehAutoIsQuota = is_string($vehFlash)
                    && $omniQuotaService->isQuotaFailureMessage($vehFlash);
                if ($vehFlashIsQuota || $vehLastIsQuota || $vehAutoIsQuota) {
                    $vehFlash = null;
                    $vehFlashType = '';
                }
                $omniBlocked = $omniQuotaService->isHardBlocked();
                $omniCanClear = ! empty($omniQuota['can_clear_lock']);
                $omniPauseTitle = ($omniQuota['pause_reason'] ?? '') === 'daily_limit'
                    ? 'Daily Omni limit reached'
                    : 'Omni paused — wait until the time below';
                $omniSpacingHint = (($omniQuota['pause_reason'] ?? '') === 'rpm_spacing')
                    ? (string) ($omniQuota['hint'] ?? '')
                    : '';
            @endphp
            <div class="pai-wiz-sub" id="pai-video-enhance" style="margin-top:1.75rem;"
                 data-veh-pick-url="{{ route('product-ai-import.enhance-video-selection', $import) }}"
                 data-bg-busy="{{ $vehRunning ? '1' : '0' }}"
                 data-omni-blocked="{{ $omniBlocked ? '1' : '0' }}">
                <div style="display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:space-between;align-items:flex-start;margin-bottom:0.85rem;">
                    <div>
                        <h3>Video · Compare &amp; choose for Shopify</h3>
                        <p class="pai-hint" style="margin-bottom:0;">
                            Same idea as photos: Google Omni polishes the <strong>full original</strong>
                            (trim ~{{ number_format($videoTrimSeconds, 1) }}s, <strong>no compress</strong>).
                            Prepare later compresses the chosen version for Shopify / mobile.
                            Long legacy videos: trim first in <a href="{{ $stepUrl('prepare') }}">Prepare</a>.
                            Each <strong>Enhance video</strong> click = <strong>1 Omni attempt</strong> (no 35s wait, no auto-retry).
                            Batch Auto may retry up to 3 times. Times below are <strong>Miami time</strong>.
                        </p>
                    </div>
                    <div class="pai-omni-meter {{ $omniBlocked ? 'is-blocked' : (! empty($omniQuota['near_limit']) ? 'is-near' : '') }}"
                         id="pai-omni-meter"
                         data-clear-url="{{ route('product-ai-import.clear-omni-lock', $import) }}"
                         title="Counts each Omni generate from this app. Hard pause = daily limit or Google rate lock. Soft pacing is for Batch Auto only.">
                        <span class="pai-omni-meter-label" id="pai-omni-meter-label">{{ $omniQuota['label'] ?? 'Omni today' }}</span>
                        @if($omniBlocked)
                            <span class="pai-omni-meter-lock" id="pai-omni-meter-lock">Paused until {{ $omniQuota['blocked_until_human'] ?? 'reset' }} (Miami)</span>
                        @elseif($omniSpacingHint !== '')
                            <span class="pai-omni-meter-hint" id="pai-omni-meter-hint">{{ $omniSpacingHint }}</span>
                        @elseif(! empty($omniQuota['hint']))
                            <span class="pai-omni-meter-hint" id="pai-omni-meter-hint">{{ $omniQuota['hint'] }}</span>
                        @endif
                    </div>
                </div>
                <div class="pai-veh-banner is-warning" id="pai-omni-lock-banner" role="status" style="margin-bottom:0.85rem;{{ $omniBlocked ? '' : 'display:none;' }}">
                    <strong id="pai-omni-lock-banner-title" style="display:block;font-size:0.72rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:0.25rem;opacity:0.85;">{{ $omniPauseTitle }}</strong>
                    <span id="pai-omni-lock-banner-text">{{ $omniQuota['hint'] ?: 'Omni is paused. Enhance video will not run so you do not burn attempts.' }}</span>
                    <form method="POST" action="{{ route('product-ai-import.clear-omni-lock', $import) }}" id="pai-omni-clear-lock-form"
                          style="margin-top:0.65rem;display:{{ $omniCanClear ? 'flex' : 'none' }};flex-wrap:wrap;gap:0.5rem;align-items:center;">
                        @csrf
                        <input type="hidden" name="wizard_step" value="enhance">
                        <button type="submit" class="btn btn-sm btn-outline-secondary" id="pai-omni-clear-lock-btn"
                                title="Clears only a Google wait lock. If you already hit today’s attempt limit, Omni stays paused until the reset time.">
                            Clear Google wait lock
                        </button>
                        <span class="pai-hint" style="margin:0;font-size:0.78rem;">Only if AI Studio already shows free Omni quota. Does not add more daily attempts.</span>
                    </form>
                </div>

                <div class="pai-veh-banner {{ $vehFlashType !== '' ? 'is-'.$vehFlashType : '' }}"
                     id="pai-veh-toast"
                     role="status"
                     data-status-url="{{ route('product-ai-import.auto-status', $import) }}"
                     @if(! $vehFlash) hidden @endif>
                    <strong id="pai-veh-toast-kicker" style="display:block;font-size:0.72rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:0.25rem;opacity:0.85;">
                        @if($vehFlashType === 'progress') In progress
                        @elseif($vehFlashType === 'error') Error
                        @elseif($vehFlashType === 'warning') Notice
                        @else Result
                        @endif
                    </strong>
                    <span id="pai-veh-toast-msg">{{ $vehFlash }}</span>
                    @if($vehFlashType === 'error' || $vehFlashType === 'warning')
                        <div id="pai-veh-retry-line" class="pai-hint" style="margin:0.55rem 0 0;font-weight:600;color:inherit;">
                            @if($vehRetryWait || $vehCanRetry === false)
                                Do not retry yet.
                            @elseif($vehCanRetry === true)
                                OK to retry (1 click = 1 Omni attempt).
                            @endif
                            @if($vehRetryHint !== '' && ! str_contains((string) $vehFlash, $vehRetryHint))
                                {{ $vehRetryHint }}
                            @endif
                            @if(! empty($vehAutoIssues['video_enhance_auto_continues']) || ! empty($vehLast['auto_continues']))
                                Auto continues with the original video and still syncs to Shopify when the rest is ready.
                            @endif
                        </div>
                    @endif
                </div>

                <div class="pai-wiz-sub" style="margin:0 0 1rem;padding:0.85rem 0 0;border-top:0;">
                    <label class="pai-hint" for="video_enhance_prompt" style="display:block;margin:0 0 0.35rem;font-weight:600;color:#374151;">
                        Video enhance prompt (Settings default — Omni only)
                    </label>
                    <textarea id="video_enhance_prompt" class="pai-textarea" rows="5" maxlength="20000">{{ $videoEnhancePromptValue }}</textarea>
                    <p class="pai-hint" style="margin-top:0.35rem;">Same style as Google AI Studio: keep background, boost diamond sparkle &amp; metal reflections. Prepare later pads the Shopify pick to 1.25:1.</p>
                </div>

                <div class="pai-enh-pairs">
                    @foreach($productVideos as $vSource)
                        @php
                            $vVersions = ($videoEnhancesBySource[(int) $vSource->id] ?? collect())->values();
                            $vLatestEnhanceId = (int) ($vVersions->first()->id ?? 0);
                            $vMerchantPicks = $import->merchantEnhancePicksMap();
                            $vSourcePick = array_key_exists((int) $vSource->id, $vMerchantPicks)
                                ? (int) $vMerchantPicks[(int) $vSource->id]
                                : null;
                            if ($vSourcePick !== null) {
                                $vSelected = $vSourcePick > 0 ? $vVersions->firstWhere('id', $vSourcePick) : null;
                                $usingVeh = $vSourcePick > 0 && $vSelected;
                            } else {
                                $vSelected = $vVersions->firstWhere('is_shopify_selected', true);
                                $usingVeh = (bool) $vSelected;
                            }
                            $vPreview = $vSelected ?: $vVersions->first();
                            $vVersionTotal = $vVersions->count();
                            $vOrigUrl = $vSource->originalUrl() ?: $vSource->displayUrl();
                            $vOrigThumb = $vOrigUrl ? ($vOrigUrl.(str_contains($vOrigUrl, '#') ? '' : '#t=0.1')) : null;
                            $vPrevUrl = $vPreview ? ($vPreview->originalUrl() ?: $vPreview->displayUrl()) : null;
                            $vDur = $vSource->duration ? number_format((float) $vSource->duration, 1).'s' : null;
                            $vSizeMb = $vSource->original_size ? round($vSource->original_size / 1048576, 1).' MB' : null;
                        @endphp
                        <div class="pai-enh-pair {{ $usingVeh ? 'is-using-enhanced' : '' }} {{ $vPreview ? '' : 'pai-enh-pair--pending' }}"
                             id="pai-veh-pair-{{ $vSource->id }}"
                             data-enh-pair
                             data-veh-pair
                             data-source-id="{{ $vSource->id }}">
                            <div class="pai-enh-pair-head">
                                <strong>{{ \Illuminate\Support\Str::limit($vSource->filename ?: ('Video #'.$vSource->id), 42) }}</strong>
                                <span class="pai-chip pai-chip--ai" style="position:static;">Google Omni</span>
                                @if($vDur)
                                    <span class="pai-chip" style="position:static;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;">
                                        {{ $vDur }}@if($vSource->duration && (float) $vSource->duration <= 10.2) · ready for Omni @endif
                                    </span>
                                @endif
                                @if($vSizeMb)<span class="pai-hint" style="margin:0;">{{ $vSizeMb }}</span>@endif
                                <span class="pai-enh-pair-status">
                                    @if($usingVeh)
                                        Shopify → Enhanced #{{ $vSelected->id }} · Google
                                    @elseif($vPreview)
                                        Shopify → Original
                                    @else
                                        Not enhanced yet
                                    @endif
                                </span>
                                <div class="pai-enh-one-controls">
                                    <button type="submit"
                                            form="pai-veh-one-{{ $vSource->id }}"
                                            class="btn btn-primary pai-enh-one-btn"
                                            data-label="{{ $vPreview ? 'Re-enhance this video' : 'Enhance this video' }}"
                                            data-title="Auto-trims ~{{ number_format($videoTrimSeconds, 1) }}s then Google Omni. Queues 1-by-1 if another job is running."
                                            @disabled($import->isAutoRunning() || $omniBlocked)
                                            title="{{ $omniBlocked ? ('Paused until '.($omniQuota['blocked_until_human'] ?? 'reset').' (Miami) — no Omni attempt so you do not burn quota') : ('Auto-trims ~'.number_format($videoTrimSeconds, 1).'s then Google Omni. Queues 1-by-1 if another job is running.') }}">
                                        {{ $omniBlocked ? 'Paused — no Omni today' : ($vPreview ? 'Re-enhance this video' : 'Enhance this video') }}
                                    </button>
                                </div>
                            </div>

                            <div class="pai-enh-card-notes">
                                <label class="pai-hint" for="pai-veh-extra-{{ $vSource->id }}" style="display:block;margin:0 0 0.3rem;font-weight:600;color:#374151;">
                                    Extra notes for this video (optional)
                                </label>
                                <textarea id="pai-veh-extra-{{ $vSource->id }}"
                                          class="pai-textarea pai-veh-card-extra"
                                          data-veh-one-form="pai-veh-one-{{ $vSource->id }}"
                                          rows="2"
                                          maxlength="4000"
                                          placeholder="Blank = Settings video prompt only"></textarea>
                                @if($vSource->duration && (float) $vSource->duration > 10.2)
                                    <div style="margin-top:0.55rem;">
                                        <label class="pai-hint" for="pai-veh-start-{{ $vSource->id }}" style="display:block;margin:0 0 0.25rem;font-weight:600;color:#374151;">
                                            Where to start the ~{{ number_format($videoTrimSeconds, 1) }}s clip (sec)
                                        </label>
                                        <input type="number" step="0.1" min="0"
                                               id="pai-veh-start-{{ $vSource->id }}"
                                               class="pai-input pai-veh-card-start"
                                               data-veh-one-form="pai-veh-one-{{ $vSource->id }}"
                                               style="max-width:7rem;"
                                               value="{{ old('start_seconds', $settings->videoEnhanceDefaultStartSeconds()) }}">
                                        <span class="pai-hint" style="display:block;margin-top:0.25rem;">
                                            Enhance auto-cuts ~{{ number_format($videoTrimSeconds, 1) }}s — no separate trim step.
                                        </span>
                                    </div>
                                @else
                                    <input type="hidden"
                                           class="pai-veh-card-start"
                                           data-veh-one-form="pai-veh-one-{{ $vSource->id }}"
                                           value="0">
                                @endif
                            </div>

                            <p class="pai-enh-frame-caption">Original vs Omni — Enhance already clips ~{{ number_format($videoTrimSeconds, 1) }}s; Prepare compresses the Shopify pick later</p>
                            <div class="pai-enh-pair-grid">
                                <article class="pai-enh-side">
                                    <div class="pai-enh-side-label">
                                        Original
                                        <span class="pai-enh-frame-badge">source</span>
                                    </div>
                                    <div class="pai-enh-frame pai-enh-frame--contain pai-enh-frame--video">
                                        @if($vOrigUrl)
                                            <video src="{{ $vOrigUrl }}" muted playsinline controls preload="metadata" controlslist="nodownload"></video>
                                        @endif
                                    </div>
                                </article>
                                <article class="pai-enh-side pai-enh-side--ai">
                                    <div class="pai-enh-side-label">
                                        Enhanced preview
                                        @if($vPreview)
                                            <span class="pai-enh-preview-tag">
                                                @if($vPreview->id === $vVersions->first()->id) Latest @else #{{ $vPreview->id }} @endif
                                                · Google
                                            </span>
                                        @endif
                                    </div>
                                    @if($vPrevUrl)
                                        <div class="pai-enh-frame pai-enh-frame--contain pai-enh-frame--video">
                                            <video src="{{ $vPrevUrl }}" muted playsinline controls preload="metadata" controlslist="nodownload"></video>
                                        </div>
                                    @else
                                        <div class="pai-enh-frame pai-enh-frame--contain pai-enh-empty">
                                            <p>No Omni version yet.</p>
                                            <button type="submit" form="pai-veh-one-{{ $vSource->id }}" class="btn btn-primary pai-enh-one-btn"
                                                    data-label="Enhance this video"
                                                    @disabled($import->isAutoRunning() || $omniBlocked)>
                                                {{ $omniBlocked ? 'Paused — no Omni today' : 'Enhance this video' }}
                                            </button>
                                        </div>
                                    @endif
                                </article>
                            </div>

                            @if($vPreview)
                                <div class="pai-enh-versions">
                                    <div class="pai-enh-versions-head">
                                        <span>Choose for Shopify</span>
                                        <span class="pai-hint" style="margin:0;">{{ $vVersionTotal }} version{{ $vVersionTotal === 1 ? '' : 's' }} · click to save which one Sync uses</span>
                                    </div>
                                    <div class="pai-enh-version-rail" role="group" aria-label="Video enhance for {{ $vSource->id }}">
                                        <form method="POST"
                                              action="{{ route('product-ai-import.enhance-video-selection', $import) }}"
                                              class="pai-enh-pick-form"
                                              data-enh-pick-form>
                                            @csrf
                                            <input type="hidden" name="source_id" value="{{ $vSource->id }}">
                                            <input type="hidden" name="enhance_id" value="0">
                                            <input type="hidden" name="wizard_step" value="enhance">
                                            <button type="submit"
                                                    class="pai-enh-version pai-enh-version--original {{ ! $usingVeh ? 'is-active' : '' }}"
                                                    title="Use original (No AI) on Shopify">
                                                <span class="pai-enh-version-frame pai-enh-version-frame--video">
                                                    @if($vOrigThumb)
                                                        <video src="{{ $vOrigThumb }}" muted playsinline preload="metadata"></video>
                                                        <span class="pai-enh-video-thumb-play" aria-hidden="true">▶</span>
                                                    @endif
                                                </span>
                                                <span class="pai-enh-version-meta">
                                                    <strong>Original</strong>
                                                    <em>No AI</em>
                                                </span>
                                            </button>
                                        </form>

                                        @foreach($vVersions as $idx => $ver)
                                            @php
                                                $isLatest = $vLatestEnhanceId > 0 && (int) $ver->id === $vLatestEnhanceId;
                                                $verLabel = $isLatest ? 'Latest' : 'v'.($vVersionTotal - $idx);
                                                $when = $ver->created_at
                                                    ? $ver->created_at->timezone(config('app.deals_display_timezone', 'America/New_York'))->format('M j, g:i A')
                                                    : '';
                                                $verUrl = $ver->originalUrl() ?: $ver->displayUrl();
                                                $verThumb = $verUrl ? ($verUrl.(str_contains($verUrl, '#') ? '' : '#t=0.1')) : null;
                                                $verIsSelected = $usingVeh && $vSelected && (int) $vSelected->id === (int) $ver->id;
                                            @endphp
                                            <form method="POST"
                                                  action="{{ route('product-ai-import.enhance-video-selection', $import) }}"
                                                  class="pai-enh-pick-form"
                                                  data-enh-pick-form>
                                                @csrf
                                                <input type="hidden" name="source_id" value="{{ $vSource->id }}">
                                                <input type="hidden" name="enhance_id" value="{{ $ver->id }}">
                                                <input type="hidden" name="wizard_step" value="enhance">
                                                <button type="submit"
                                                        class="pai-enh-version {{ $verIsSelected ? 'is-active' : '' }} {{ $isLatest ? 'pai-enh-version--latest' : '' }}"
                                                        title="Use {{ $verLabel }} on Shopify">
                                                    <span class="pai-enh-version-frame pai-enh-version-frame--video">
                                                        @if($isLatest)<span class="pai-enh-version-badge">Latest</span>@endif
                                                        <span class="pai-enh-engine-badge pai-enh-engine-badge--google">Google</span>
                                                        @if($verThumb)
                                                            <video src="{{ $verThumb }}" muted playsinline preload="metadata"></video>
                                                            <span class="pai-enh-video-thumb-play" aria-hidden="true">▶</span>
                                                        @endif
                                                    </span>
                                                    <span class="pai-enh-version-meta">
                                                        <strong>{{ $verLabel }}</strong>
                                                        <em>Google · {{ $when !== '' ? $when : '#'.$ver->id }}</em>
                                                    </span>
                                                </button>
                                                <button type="button"
                                                        class="pai-enh-version-del"
                                                        data-delete-url="{{ route('product-ai-import.destroy-media', [$import, $ver]) }}"
                                                        data-enhance-id="{{ $ver->id }}"
                                                        title="Delete this enhanced video completely">×</button>
                                            </form>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>

                        <form id="pai-veh-one-{{ $vSource->id }}"
                              action="{{ route('product-ai-import.enhance-video', $import) }}"
                              method="POST"
                              class="pai-hidden-form pai-veh-one-form"
                              data-pai-lux-loader="video-enhance">
                            @csrf
                            <input type="hidden" name="wizard_step" value="enhance">
                            <input type="hidden" name="source_media_id" value="{{ $vSource->id }}">
                            <input type="hidden" name="video_enhance_prompt" value="{{ $videoEnhancePromptValue }}" class="pai-veh-one-prompt">
                            <input type="hidden" name="prompt_extra" value="" class="pai-veh-one-extra">
                            <input type="hidden" name="start_seconds" value="{{ $settings->videoEnhanceDefaultStartSeconds() }}" class="pai-veh-one-start">
                        </form>
                    @endforeach
                </div>
            </div>
            <script>
            (function () {
                var root = document.getElementById('pai-video-enhance');
                if (!root) return;
                var url = root.getAttribute('data-veh-pick-url');
                var token = document.querySelector('meta[name="csrf-token"]');
                var csrf = token ? token.getAttribute('content') : '';
                var toast = document.getElementById('pai-veh-toast');

                var toastKicker = document.getElementById('pai-veh-toast-kicker');
                var toastMsg = document.getElementById('pai-veh-toast-msg');
                var statusUrl = toast ? (toast.getAttribute('data-status-url') || '') : '';
                var vehPollTimer = null;
                var lastVehToastType = '';
                var lastVehToastMsg = '';

                function showVehToast(msg, type, opts) {
                    if (!toast) return;
                    opts = opts || {};
                    var nextType = type || '';

                    toast.hidden = !msg;
                    toast.classList.remove('is-success', 'is-warning', 'is-error', 'is-progress');
                    if (msg && nextType) toast.classList.add('is-' + nextType);
                    if (toastMsg) toastMsg.textContent = msg || '';
                    else toast.textContent = msg || '';
                    if (toastKicker) {
                        toastKicker.textContent = nextType === 'progress' ? 'In progress'
                            : (nextType === 'error' ? 'Error' : (nextType === 'warning' ? 'Notice' : 'Result'));
                    }

                    // Never auto-scroll to the video panel (refresh / quota / poll).
                    // Only jump when the merchant explicitly clicked Enhance (forceScroll).
                    if (msg && opts.forceScroll) {
                        try { toast.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } catch (e) {}
                    }

                    lastVehToastType = msg ? nextType : '';
                    lastVehToastMsg = msg || '';
                }

                function setTopBgBanner(on, title, msg) {
                    var banner = document.getElementById('pai-bg-banner');
                    if (!banner) return;
                    var titleEl = document.getElementById('pai-bg-banner-title');
                    var msgEl = document.getElementById('pai-bg-banner-msg');
                    if (on) {
                        banner.hidden = false;
                        banner.classList.add('is-on');
                        banner.setAttribute('data-busy', '1');
                        if (titleEl) titleEl.textContent = title || 'Enhancing video (Omni)…';
                        if (msgEl) msgEl.textContent = msg || 'Working in the background — you can scroll and open other steps.';
                    } else {
                        banner.hidden = true;
                        banner.classList.remove('is-on');
                        banner.setAttribute('data-busy', '0');
                    }
                }

                function applyOmniQuotaUi(q) {
                    if (!q || typeof q !== 'object') return;
                    // Manual Enhance: only hard blocks (daily / Google RPM). Soft 35s pacing is Batch Auto only.
                    var hardBlocked = !!(q.hard_blocked || (q.blocked && q.pause_reason !== 'rpm_spacing'));
                    root.setAttribute('data-omni-blocked', hardBlocked ? '1' : '0');
                    var meter = document.getElementById('pai-omni-meter');
                    var label = document.getElementById('pai-omni-meter-label');
                    var lock = document.getElementById('pai-omni-meter-lock');
                    var hint = document.getElementById('pai-omni-meter-hint');
                    var banner = document.getElementById('pai-omni-lock-banner');
                    var bannerText = document.getElementById('pai-omni-lock-banner-text');
                    var bannerTitle = document.getElementById('pai-omni-lock-banner-title');
                    var clearForm = document.getElementById('pai-omni-clear-lock-form');
                    if (label && q.label) label.textContent = q.label;
                    if (meter) {
                        meter.classList.toggle('is-blocked', hardBlocked);
                        meter.classList.toggle('is-near', !hardBlocked && !!q.near_limit);
                    }
                    if (banner) {
                        banner.style.display = hardBlocked ? '' : 'none';
                    }
                    if (bannerTitle) {
                        bannerTitle.textContent = q.pause_reason === 'daily_limit'
                            ? 'Daily Omni limit reached'
                            : 'Omni paused — wait until the time below';
                    }
                    if (bannerText && q.hint && hardBlocked) {
                        bannerText.textContent = q.hint;
                    }
                    if (clearForm) {
                        clearForm.style.display = q.can_clear_lock ? 'flex' : 'none';
                    }
                    if (hardBlocked) {
                        if (lock) {
                            lock.textContent = 'Paused until ' + (q.blocked_until_human || 'reset') + ' (Miami)';
                        } else if (meter) {
                            var span = document.createElement('span');
                            span.className = 'pai-omni-meter-lock';
                            span.id = 'pai-omni-meter-lock';
                            span.textContent = 'Paused until ' + (q.blocked_until_human || 'reset') + ' (Miami)';
                            meter.appendChild(span);
                        }
                        if (hint) hint.remove();
                    } else {
                        if (lock) lock.remove();
                        if (hint && q.hint) {
                            hint.textContent = q.hint;
                        } else if (meter && q.hint && !document.getElementById('pai-omni-meter-hint')) {
                            var h = document.createElement('span');
                            h.className = 'pai-omni-meter-hint';
                            h.id = 'pai-omni-meter-hint';
                            h.textContent = q.hint;
                            meter.appendChild(h);
                        } else if (hint && !q.hint) {
                            hint.remove();
                        }
                    }
                    root.querySelectorAll('.pai-enh-one-btn').forEach(function (btn) {
                        if (hardBlocked) {
                            btn.disabled = true;
                            if (q.pause_reason === 'daily_limit') {
                                btn.textContent = 'Paused — daily limit';
                                btn.title = 'Daily limit — resets ' + (q.reset_at_human || '3 AM Miami');
                            } else {
                                btn.textContent = 'Paused — rate limit';
                                btn.title = 'Paused until ' + (q.blocked_until_human || 'reset') + ' (Miami)';
                            }
                        } else {
                            btn.disabled = root.getAttribute('data-bg-busy') === '1';
                            btn.textContent = btn.getAttribute('data-label') || 'Enhance video';
                            btn.title = btn.getAttribute('data-title') || '';
                        }
                    });
                }

                function stopVehPoll() {
                    if (vehPollTimer) {
                        clearInterval(vehPollTimer);
                        vehPollTimer = null;
                    }
                }

                function startVehPoll() {
                    if (!statusUrl) return;
                    stopVehPoll();
                    var ticks = 0;
                    function tick() {
                        ticks += 1;
                        fetch(statusUrl, {
                            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                            credentials: 'same-origin'
                        })
                            .then(function (r) { return r.json(); })
                            .then(function (data) {
                                var kind = data.bg_kind || '';
                                var st = data.bg_status || '';
                                var queueCount = parseInt(data.bg_queue_count || 0, 10) || 0;
                                var running = !!(data.is_bg_running && kind === 'video_enhance');
                                var waitingInQueue = !running && queueCount > 0 && root.getAttribute('data-bg-busy') === '1';
                                var msg = data.bg_message || '';
                                if (data.omni_quota) applyOmniQuotaUi(data.omni_quota);

                                // Hard pause only (daily / Google RPM). Soft 35s pacing must NOT kill the poller
                                // or hide Omni errors — that left “WORKING IN BACKGROUND” spinning forever.
                                var hardPause = !!(data.omni_quota && (data.omni_quota.hard_blocked
                                    || (data.omni_quota.blocked && data.omni_quota.pause_reason !== 'rpm_spacing')));
                                if (!running && hardPause && !waitingInQueue) {
                                    stopVehPoll();
                                    root.setAttribute('data-bg-busy', '0');
                                    setTopBgBanner(false);
                                    if (toast) toast.hidden = true;
                                    if (typeof window.paiHideLuxuryLoader === 'function') window.paiHideLuxuryLoader();
                                    return;
                                }

                                if (running) {
                                    showVehToast(msg || 'Enhancing video with Google Omni… (this can take several minutes)', 'progress');
                                    setTopBgBanner(true, data.status_label || 'Enhancing video (Omni)…', msg);
                                    root.setAttribute('data-bg-busy', '1');
                                    return;
                                }

                                // Still queued behind another job for this import — keep waiting.
                                if (waitingInQueue || (data.is_bg_running && kind !== 'video_enhance' && root.getAttribute('data-bg-busy') === '1')) {
                                    showVehToast('Queued — waiting for the current job, then Omni runs 1-by-1.', 'progress');
                                    setTopBgBanner(true, data.status_label || 'Working…', msg || 'Queued behind current job.');
                                    return;
                                }

                                if (kind === 'video_enhance' && (st === 'done' || st === 'failed')) {
                                    stopVehPoll();
                                    root.setAttribute('data-bg-busy', '0');
                                    if (typeof window.paiHideLuxuryLoader === 'function') window.paiHideLuxuryLoader();
                                    var quotaBlocked = !!(data.omni_quota && (data.omni_quota.hard_blocked
                                        || (data.omni_quota.blocked && data.omni_quota.pause_reason !== 'rpm_spacing')));
                                    var msgLooksQuota = /http 429|exceeded your current quota|resource_exhausted|generate_requests_per_model_per_day/i.test(msg || '');
                                    if (st === 'failed' && (quotaBlocked || msgLooksQuota)) {
                                        // Do not keep the raw Google dump in the red toast — lock banner handles it.
                                        if (data.omni_quota) applyOmniQuotaUi(data.omni_quota);
                                        else applyOmniQuotaUi({
                                            blocked: true,
                                            hard_blocked: true,
                                            pause_reason: 'daily_limit',
                                            label: 'Omni today: 20 / 20',
                                            hint: 'Google Omni daily quota is full. Enhance is paused until the reset.',
                                            blocked_until_human: 'quota reset',
                                            near_limit: false
                                        });
                                        if (toast) toast.hidden = true;
                                    } else {
                                        showVehToast(
                                            msg || (st === 'done' ? 'Video enhance finished.' : 'Video enhance failed.'),
                                            st === 'done' ? 'success' : 'error'
                                        );
                                    }
                                    // If more jobs are queued, let the main banner/poller continue without a hard reload race.
                                    if (queueCount > 0 || data.is_bg_running) {
                                        return;
                                    }
                                    setTopBgBanner(false);
                                    setTimeout(function () { window.location.reload(); }, st === 'done' ? 900 : 1600);
                                    return;
                                }

                                // Queued but status not visible yet — keep waiting a bit.
                                // If Auto already finished Omni (repair pass), stop the stale "connecting" toast.
                                var autoMsg = (data.auto_message || data.message || '') + '';
                                if (/Enhanced \d+ video|Omni OK|already enhanced|cropping and syncing/i.test(autoMsg)) {
                                    showVehToast(autoMsg.slice(0, 180), 'progress');
                                    if (/Prepared|Syncing|Media updated|synced/i.test(autoMsg)) {
                                        stopVehPoll();
                                        root.setAttribute('data-bg-busy', '0');
                                    }
                                    return;
                                }
                                if (ticks < 8 && root.getAttribute('data-bg-busy') === '1') {
                                    showVehToast('Starting Google Omni… connecting', 'progress');
                                    return;
                                }
                                if (ticks >= 80) {
                                    stopVehPoll();
                                    root.setAttribute('data-bg-busy', '0');
                                    if (typeof window.paiHideLuxuryLoader === 'function') window.paiHideLuxuryLoader();
                                    showVehToast('No progress from the server after a long wait. Check Stop banner / logs, then try again.', 'error');
                                }
                            })
                            .catch(function () { /* keep polling */ });
                    }
                    tick();
                    vehPollTimer = setInterval(tick, 2500);
                }

                // If a video job is already running when the page loads, keep polling — do not force scroll.
                if (toast && !toast.hidden) {
                    lastVehToastType = toast.classList.contains('is-progress') ? 'progress'
                        : (toast.classList.contains('is-error') ? 'error'
                            : (toast.classList.contains('is-success') ? 'success' : 'warning'));
                    lastVehToastMsg = toastMsg ? (toastMsg.textContent || '') : (toast.textContent || '');
                }
                // Only poll when THIS import has a live video_enhance job — not Prepare/Sync / quota pause.
                var omniPausedOnLoad = root.getAttribute('data-omni-blocked') === '1';
                if (!omniPausedOnLoad && root.getAttribute('data-bg-busy') === '1') {
                    startVehPoll();
                }

                root.querySelectorAll('.pai-veh-one-form').forEach(function (form) {
                    form.addEventListener('submit', function (e) {
                        e.preventDefault();
                        if (root.getAttribute('data-omni-blocked') === '1') {
                            // Banner already explains pause — do not yank scroll to the video panel.
                            showVehToast('Omni is hard-paused (daily limit or Google rate lock). Soft 35s pacing does not block this button.', 'error');
                            return;
                        }
                        // Allow queueing while another job runs — server keeps 1-by-1 order per import.
                        var id = form.id;
                        var extra = root.querySelector('.pai-veh-card-extra[data-veh-one-form="' + id + '"]');
                        var start = root.querySelector('.pai-veh-card-start[data-veh-one-form="' + id + '"]');
                        var promptEl = document.getElementById('video_enhance_prompt');
                        var promptIn = form.querySelector('.pai-veh-one-prompt');
                        var extraIn = form.querySelector('.pai-veh-one-extra');
                        var startIn = form.querySelector('.pai-veh-one-start');
                        if (promptIn && promptEl) promptIn.value = promptEl.value || '';
                        if (extraIn && extra) extraIn.value = extra.value || '';
                        if (startIn && start) startIn.value = start.value || '0';

                        var fd = new FormData(form);
                        // Banner only — no full-page overlay so you can scroll / change wizard steps while Omni runs.
                        showVehToast('Starting Google Omni — 1 attempt (no auto-retry). Trim ~9s then enhance. You can keep browsing this import.', 'progress', { forceScroll: true });
                        setTopBgBanner(true, 'Enhancing video (Omni)…', 'Queued — 1 Omni attempt. Progress stays in the Video banner.');
                        root.setAttribute('data-bg-busy', '1');
                        if (typeof window.paiHideLuxuryLoader === 'function') window.paiHideLuxuryLoader();

                        fetch(form.action, {
                            method: 'POST',
                            body: fd,
                            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                            credentials: 'same-origin'
                        })
                            .then(function (r) {
                                return r.json().then(function (data) {
                                    return { httpOk: r.ok, status: r.status, data: data || {} };
                                }).catch(function () {
                                    return { httpOk: r.ok, status: r.status, data: {} };
                                });
                            })
                            .then(function (pack) {
                                var data = pack.data || {};
                                if (!pack.httpOk || data.ok === false || data.queued === false) {
                                    root.setAttribute('data-bg-busy', '0');
                                    setTopBgBanner(false);
                                    showVehToast(data.message || ('Could not start video enhance (HTTP ' + pack.status + ').'), 'error');
                                    return;
                                }
                                showVehToast(data.message || 'Video enhance running in background…', 'progress');
                                startVehPoll();
                            })
                            .catch(function () {
                                root.setAttribute('data-bg-busy', '0');
                                setTopBgBanner(false);
                                showVehToast('Network error — enhance did not start. Check connection and try again.', 'error');
                            });
                    });
                });

                root.querySelectorAll('.pai-veh-trim-form').forEach(function (form) {
                    form.addEventListener('submit', function (e) {
                        if (root.getAttribute('data-bg-busy') === '1') {
                            e.preventDefault();
                            showVehToast('Another job is running. Stop it first, then trim.', 'error');
                            return;
                        }
                        var pair = form.closest('[data-veh-pair]');
                        var start = pair ? pair.querySelector('.pai-veh-card-start') : null;
                        var hidden = form.querySelector('.pai-veh-trim-start');
                        if (hidden && start) hidden.value = start.value || '0';
                        if (!window.confirm('Trim the FULL original to ~9s? A full backup is kept. The compressed Prepare file is not used.')) {
                            e.preventDefault();
                        }
                    });
                });

                /* Video pick/delete uses same POST forms + handlers as photos ([data-enh-pick-form]). */
            })();
            </script>
            @elseif(! $videoEnhanceEnabled && $productVideos->isNotEmpty())
            <p class="pai-hint" style="margin-top:1rem;">Video enhance is disabled in Settings. Video still goes through Prepare compress for Shopify.</p>
            @endif
        @endif
    </section>
    @endif

    {{-- ═══════════════ STEP 4: LIFESTYLE ═══════════════ --}}
    @if($wizardStep === 'lifestyle')
    @php
        $lifestyleCandidates = $media->where('media_type', 'image')->where('is_ai_generated', false)->values();
        $maxLifeRefs = max(1, (int) config('product_ai_import.lifestyle_max_reference_images', 6));
        $lifestyleRefIds = $import->lifestyleRefIds();
        $lifestyleRefFlip = array_fill_keys($lifestyleRefIds, true);
        $aiMedia = $media->where('is_ai_generated', true)->filter(fn ($m) => ! $m->isEnhance())->sortByDesc('id')->values();
    @endphp
    <section class="pai-wiz-panel">
        <header class="pai-wiz-panel-head">
            <div>
                <h2>4 · Lifestyle</h2>
                <p>
                    Select reference photos — Lifestyle AI uses the <strong>Enhanced</strong> version selected in Improve
                    (falls back to original only if that photo has no Enhance / Original is selected).
                    <span class="pai-hint" style="display:block;margin-top:0.35rem;">Image AI: <strong>{{ $settings->imageAiProviderLabel() }}</strong> · change in Product AI Settings</span>
                </p>
            </div>
            <div class="pai-wiz-stat">
                <strong id="pai-life-ref-count">{{ $lifestyleRefs->count() }}</strong>
                <span>/ {{ $maxLifeRefs }} selected</span>
            </div>
        </header>

        @if(!$settings->lifestyle_enabled)
            <p class="pai-hint">Lifestyle generation is disabled in Settings.</p>
        @else
            <form action="{{ route('product-ai-import.generate-lifestyle', $import) }}" method="POST" class="pai-form" id="pai-lifestyle-form" data-pai-lux-loader="lifestyle"
                  data-life-run-pick-url="{{ route('product-ai-import.sync-lifestyle-refs', $import) }}">
                @csrf
                <input type="hidden" name="wizard_step" value="lifestyle">
                <input type="hidden" name="lifestyle_refs_sync" value="1">

                <div class="pai-wiz-sub" style="margin-top:0;padding-top:0;border-top:0;">
                    <h3>Select reference photos</h3>
                    <p class="pai-hint">
                        Thumbnails show the <strong>Enhanced</strong> pick from the Enhance step when available.
                        Click to select / deselect (up to {{ $maxLifeRefs }}). Selection saves automatically.
                    </p>

                    @if($lifestyleCandidates->isEmpty())
                        <div class="pai-wiz-callout">
                            No product photos yet. <a href="{{ $stepUrl('media') }}">Upload images in Media</a> first.
                        </div>
                    @else
                        <div class="pai-media-grid pai-media-grid--lux pai-life-pick-grid" id="pai-life-pick-grid">
                            @foreach($lifestyleCandidates as $item)
                                @php
                                    $checked = isset($lifestyleRefFlip[(int) $item->id]);
                                    $lifeVisual = $import->preferredLifestyleReference($item);
                                    $lifeVisualUrl = $lifeVisual->originalUrl() ?: $lifeVisual->displayUrl();
                                    $lifeIsEnhanced = $lifeVisual->isEnhance();
                                @endphp
                                <div class="pai-life-pick {{ $checked ? 'is-selected' : '' }}">
                                    <label class="pai-life-pick-main">
                                        <input type="checkbox" name="lifestyle_refs[]" value="{{ $item->id }}" class="pai-life-pick-input" @checked($checked)>
                                        <span class="pai-life-pick-check" aria-hidden="true">✓</span>
                                        @if($item->is_primary)<span class="pai-chip">Primary</span>@endif
                                        @if($lifeIsEnhanced)
                                            <span class="pai-chip pai-chip--enhance" style="position:absolute;top:0.4rem;left:0.4rem;z-index:2;">Enhanced</span>
                                        @endif
                                        <span class="pai-life-pick-thumb">
                                            <img src="{{ $lifeVisualUrl }}" alt="{{ $item->filename }}">
                                        </span>
                                        <span class="pai-life-pick-meta">{{ \Illuminate\Support\Str::limit($item->filename ?: 'Photo', 28) }}</span>
                                    </label>
                                    <button type="button" class="pai-life-pick-view" data-pai-lightbox data-type="image" data-src="{{ $lifeVisualUrl }}" data-title="{{ $lifeIsEnhanced ? 'Enhanced · '.$item->filename : $item->filename }}">View</button>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <p class="pai-hint" id="pai-life-run-pick-toast" style="margin:0.55rem 0 0;" aria-live="polite"></p>
                </div>

                <div class="pai-wiz-sub">
                    <div class="pai-fields">
                        <div class="pai-field pai-field--full">
                            <label for="lifestyle_prompt">Lifestyle prompt</label>
                            <p class="pai-hint">Locked rule: same design, color, and shape as your selected references — luxury lighting only.</p>
                            <textarea name="lifestyle_prompt" id="lifestyle_prompt" class="pai-textarea" rows="10" maxlength="20000" required>{{ $lifestylePromptValue }}</textarea>
                        </div>
                        <div class="pai-field pai-field--full">
                            <label for="pai-life-prompt-extra">Extra notes for this run (optional)</label>
                            <textarea name="prompt_extra" id="pai-life-prompt-extra" class="pai-textarea" rows="2" maxlength="4000" placeholder="Leave blank for Settings prompt only. Example: la cara del león es white gold">{{ old('prompt_extra') }}</textarea>
                            <p class="pai-hint">Spanish or English OK. Blank = default Settings. Filled = Settings + your notes (OpenAI and Google). Uses the selected reference photos.</p>
                    </div>
                    </div>
                    <div class="pai-actions pai-ai-provider-row">
                        <label class="pai-ai-provider-label" for="pai-life-provider">
                            Generate with
                            <select name="image_ai_provider" id="pai-life-provider" class="pai-input pai-select pai-ai-provider-select">
                                <option value="openai" @selected(($settings->imageAiProvider() ?: 'openai') === 'openai')>OpenAI</option>
                                <option value="google" @selected($settings->imageAiProvider() === 'google')>Google Gemini</option>
                            </select>
                        </label>
                        <button type="submit" class="btn btn-primary" id="pai-life-generate-btn" name="pai_action" value="generate" @disabled($lifestyleCandidates->isEmpty())>
                            Generate Lifestyle Image
                        </button>
                        <button type="submit" class="btn btn-secondary" name="pai_action" value="save_refs" formaction="{{ route('product-ai-import.sync-lifestyle-refs', $import) }}" formnovalidate>
                            Save selection only
                        </button>
                    </div>
                    <p class="pai-hint" style="margin-top:0.45rem;">Pick OpenAI or Google for this generation. The new image is selected for Shopify (older ones stay in history). Google uses an extra fidelity wrapper from Product AI Import settings (OpenAI prompt unchanged).</p>
                </div>
            </form>

            <div class="pai-wiz-sub">
                <h3>Or upload your own lifestyle image</h3>
                <p class="pai-hint">
                    If you already have a “how it looks” photo (or prefer one you made elsewhere), upload it here.
                    Click <strong>Upload lifestyle image</strong> to add it. It appears as <strong>Your upload</strong> (not AI)
                    and is marked for Shopify — you can switch anytime with <strong>Use for Shopify</strong>.
                </p>
                <form action="{{ route('product-ai-import.upload-lifestyle', $import) }}" method="POST" enctype="multipart/form-data" class="pai-form" id="pai-lifestyle-upload-form">
                    @csrf
                    <input type="hidden" name="wizard_step" value="lifestyle">
                    <div class="pai-upload-grid" style="grid-template-columns:1fr;">
                        <div class="pai-dropzone" id="pai-life-upload-drop">
                            <div class="pai-dropzone-hit">
                                <input type="file" name="lifestyle_image" id="lifestyle_image" class="pai-file-input" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp" required>
                                <div class="pai-dropzone-label">
                                    <strong>Drop or choose lifestyle image</strong>
                                    <span>JPG, PNG, or WEBP — will be cropped to theme ratio like the others</span>
                                </div>
                            </div>
                            <div class="pai-client-previews" id="pai-life-upload-preview"></div>
                        </div>
                    </div>
                    <div class="pai-actions">
                        <button type="submit" class="btn btn-primary">Upload lifestyle image</button>
                    </div>
                </form>
            </div>

            @if($aiMedia->isNotEmpty())
                <div class="pai-wiz-sub" id="pai-life-history">
                    <h3>Lifestyle history</h3>
                    <p class="pai-hint">
                        AI generations and your uploads are kept. Mark <strong>Use for Shopify</strong> on the one you want;
                        delete any you do not need. <strong>Edit with AI</strong> revises that image only (new history card — generate prompt stays untouched).
                    </p>
                    <p class="pai-hint pai-life-toast" id="pai-life-toast" hidden></p>
                    <div class="pai-media-grid pai-media-grid--lux" id="pai-life-history-grid">
                        @foreach($aiMedia as $item)
                            @php
                                $lifeEditProvider = $item->engineKey() ?: ($settings->imageAiProvider() ?: 'openai');
                            @endphp
                            <article class="pai-media-card pai-media-card--lux pai-life-hist-card {{ $item->is_shopify_selected ? 'pai-media-card--shopify' : '' }}"
                                     data-media-id="{{ $item->id }}"
                                     data-select-url="{{ route('product-ai-import.select-shopify-lifestyle', [$import, $item]) }}"
                                     data-delete-url="{{ route('product-ai-import.destroy-media', [$import, $item]) }}">
                                <span class="pai-chip {{ $item->providerChipClass() }}">{{ $item->providerLabel() }}</span>
                                <button type="button" class="pai-media-open" data-pai-lightbox data-type="image" data-src="{{ $item->displayUrl() }}" data-orig="{{ $item->originalUrl() }}" data-title="{{ $item->filename }}">
                                    <img src="{{ $item->displayUrl() }}" alt="{{ $item->alt_text ?: 'Lifestyle' }}">
                                    <span class="pai-media-zoom">View full size</span>
                                    <span class="pai-life-selected-mark pai-life-shopify-badge" @if(! $item->is_shopify_selected) hidden @endif>
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        Selected for Shopify
                                    </span>
                                </button>
                                <div class="pai-media-meta">
                                    #{{ $item->id }}
                                    @if($item->processed_size)
                                        · {{ number_format($item->processed_size / 1024, 0) }} KB
                                    @endif
                                    · {{ $item->created_at?->timezone(config('app.deals_display_timezone', 'America/New_York'))->format('M j, g:i A') }}
                                </div>
                                <div class="pai-media-actions">
                                    <button type="button"
                                            class="btn btn-secondary pai-ai-edit-open"
                                            data-pai-ai-edit
                                            data-edit-kind="lifestyle"
                                            data-edit-url="{{ route('product-ai-import.edit-lifestyle', [$import, $item]) }}"
                                            data-edit-thumb="{{ $item->displayUrl() }}"
                                            data-edit-provider="{{ $lifeEditProvider }}"
                                            data-edit-title="Edit lifestyle #{{ $item->id }}">
                                        Edit with AI
                                    </button>
                                    <button type="button" class="btn {{ $item->is_shopify_selected ? 'btn-secondary' : 'btn-primary' }} pai-life-select-btn" @disabled($item->is_shopify_selected)>
                                        {{ $item->is_shopify_selected ? 'Selected' : 'Use for Shopify' }}
                                    </button>
                                    <button type="button" class="btn btn-danger pai-life-delete-btn">Delete</button>
                                </div>
                            </article>
                        @endforeach
                    </div>
                </div>
            @endif
        @endif
    </section>
    @endif
    {{-- ═══════════════ STEP 6: SHOPIFY ═══════════════ --}}
    @if($wizardStep === 'shopify')
    <section class="pai-wiz-panel">
        <header class="pai-wiz-panel-head">
            <div>
                <h2>6 · {{ $isImprove ? 'Sync media to Shopify' : 'Shopify Draft' }}</h2>
                <p>
                    @if($isImprove)
                        Media-only sync: upload replacements, remap variant images, restore gallery order, then remove old media.
                        Never changes Active/Draft, collections, metafields, title, body, or pricing.
                    @elseif($shopifyDone)
                        Product linked. When something changes, use the blue <strong>Update Shopify</strong> bar at the top.
                    @else
                        Create a single-variant <strong>DRAFT</strong> (not Active). Review pricing and inventory first.
                    @endif
                </p>
            </div>
        </header>

        @if($isImprove)
            @php
                $lastImproveSync = ! empty($form['last_improve_sync_at'])
                    ? \Illuminate\Support\Carbon::parse($form['last_improve_sync_at'])
                        ->timezone(config('app.deals_display_timezone', 'America/New_York'))
                        ->format('M j, Y g:i A')
                    : null;
                $adminImproveUrl = $adminUrl ?: ($improveMeta['admin_url'] ?? null);
            @endphp
            <div class="pai-linked-row" id="pai-sync-card">
                <span class="pai-linked-row-label">Linked</span>
                <code>{{ $import->shopify_product_gid }}</code>
                @if($lastImproveSync)
                    <span class="pai-linked-row-meta">Last media sync {{ $lastImproveSync }}</span>
                @endif
                @if($adminImproveUrl)
                    <a href="{{ $adminImproveUrl }}" target="_blank" rel="noopener" class="pai-linked-row-link">Open in Shopify</a>
                @endif
            </div>

            <div class="pai-wiz-callout" style="margin-bottom:1rem;">
                <strong>{{ $import->shopifyMediaItems()->count() }}</strong> file(s) selected for Shopify.
                Sync prepares pending files first, then replaces media while keeping variant ↔ image links.
            </div>

            <form action="{{ route('product-ai-import.sync-improve-media', $import) }}" method="POST" class="pai-form" id="pai-shopify-form" data-pai-lux-loader="shopify-update">
                @csrf
                <input type="hidden" name="wizard_step" value="shopify">
                <div class="pai-actions" id="pai-shopify-update-actions">
                    <button type="submit"
                            class="btn {{ $import->isBackgroundBusy() ? 'btn-primary' : 'btn-primary' }}"
                            id="pai-shopify-update-btn"
                            @disabled($media->isEmpty() || $import->isAutoRunning())
                            title="{{ $import->isBackgroundBusy() ? 'Queues behind the current job (1-by-1).' : 'Upload → remap variants → reorder → delete old media' }}">
                        {{ $import->isBackgroundBusy() ? 'Queue Sync media' : 'Sync media to Shopify' }}
                    </button>
                    @if($adminImproveUrl)
                        <a href="{{ $adminImproveUrl }}" target="_blank" rel="noopener" class="btn btn-secondary">Open in Shopify</a>
                    @endif
                    <p class="pai-hint" style="flex-basis:100%;margin:0.35rem 0 0;">
                        Prefer the blue <strong>Sync media</strong> bar at the top when you see “pending”.
                        Title, pricing, metafields, collections, and status are never touched.
                    </p>
                </div>
            </form>

            @if($import->wasRevertedToOriginals())
                <p class="pai-hint" style="margin-top:0.75rem;">
                    Already reverted to originals. Tag
                    <code>{{ \App\Models\ProductAiImport::SHOPIFY_IMPROVED_TAG }}</code>
                    is kept so Improve will not run again.
                </p>
            @else
                <form
                    action="{{ route('product-ai-import.revert-improve-originals', $import) }}"
                    method="POST"
                    class="pai-form"
                    style="margin-top:0.65rem;"
                    onsubmit="return confirm('Revert this product on Shopify to the original files (before AI and crop)?\n\n• Removes enhanced / cropped media\n• Restores originals and remaps variants\n• Keeps the pai-media-improved tag so Improve will not touch it again');"
                >
                    @csrf
                    <input type="hidden" name="wizard_step" value="shopify">
                    <button
                        type="submit"
                        class="btn btn-secondary"
                        @disabled($import->isAutoRunning() || $media->isEmpty())
                        title="Restore original media on Shopify and keep the Improve skip tag"
                    >
                        {{ $import->isBackgroundBusy() ? 'Queue Revert to originals' : 'Revert to originals' }}
                    </button>
                    <p class="pai-hint" style="margin:0.35rem 0 0;">
                        Puts Shopify back on the downloaded originals (no AI, no crop). Keeps
                        <code>{{ \App\Models\ProductAiImport::SHOPIFY_IMPROVED_TAG }}</code>
                        so Improve Existing will skip this product.
                    </p>
                </form>
            @endif
        @elseif($shopifyDone)
            @php
                $lastSynced = ! empty($form['shopify_last_synced_at'])
                    ? \Illuminate\Support\Carbon::parse($form['shopify_last_synced_at'])
                        ->timezone(config('app.deals_display_timezone', 'America/New_York'))
                        ->format('M j, Y g:i A')
                    : null;
            @endphp
            {{-- Quiet link row only — pending Update lives in the top banner (one place). --}}
            <div class="pai-linked-row" id="pai-sync-card">
                <span class="pai-linked-row-label">Linked</span>
                <code>{{ $import->shopify_product_gid }}</code>
                @if($lastSynced)
                    <span class="pai-linked-row-meta">Last synced {{ $lastSynced }}</span>
                @endif
                @if($adminUrl)
                    <a href="{{ $adminUrl }}" target="_blank" rel="noopener" class="pai-linked-row-link">Open in Shopify</a>
                @endif
            </div>

            @include('product_ai_import.partials.guide_from_product')

            @if(count($guideColorValues))
                <div class="pai-wiz-callout" style="margin-bottom:1rem;">
                    <strong>Color variants from guide</strong>
                    <div>{{ $guideColorOption }}: {{ implode(', ', $guideColorValues) }}</div>
                </div>
            @endif

            <form action="{{ route('product-ai-import.update-shopify-draft', $import) }}" method="POST" class="pai-form" id="pai-shopify-form" data-pai-lux-loader="shopify-update">
                @csrf
                <input type="hidden" name="wizard_step" value="shopify">
                <input type="hidden" name="guide_product_id" id="pai-guide-hidden-id" value="{{ $guideProductId ?? '' }}">
                <input type="hidden" name="guide_product_title" id="pai-guide-hidden-title" value="{{ $guideProductTitle ?? '' }}">
                <div id="pai-guide-collection-ids">
                    @foreach($selectedCollectionIds as $cid)
                        <input type="hidden" name="collection_ids[]" value="{{ $cid }}">
                    @endforeach
                </div>

                @include('product_ai_import.partials.guide_metafields_editor')

                <div class="pai-fields">
                    <div class="pai-field">
                        <label for="shopify_sku">SKU <span class="pai-optional">(required)</span></label>
                        <input type="text" name="sku" id="shopify_sku" class="pai-input" value="{{ old('sku', $import->sku) }}" required maxlength="120">
                    </div>
                    <div class="pai-field">
                        <label for="shopify_inventory">Inventory qty <span class="pai-optional">(per variant)</span></label>
                        <input type="number" name="inventory" id="shopify_inventory" class="pai-input" value="{{ old('inventory', $form['inventory'] ?? 10) }}" min="0" required>
                        <span class="pai-hint" style="margin-top:0.35rem;">Default 10. Same stock is applied to every color/metal variant on sync.</span>
                    </div>
                    <div class="pai-field">
                        <label for="shopify_price">Sale price</label>
                        <input type="number" step="0.01" min="0" name="price" id="shopify_price" class="pai-input" value="{{ old('price', $form['price'] ?? '') }}" required>
                    </div>
                    <div class="pai-field">
                        <label for="shopify_compare">Compare-at price</label>
                        <input type="number" step="0.01" min="0" name="compare_at_price" id="shopify_compare" class="pai-input" value="{{ old('compare_at_price', $form['compare_at_price'] ?? '') }}">
                    </div>
                    <div class="pai-field">
                        <label for="shopify_cost">Cost per item</label>
                        <input type="number" step="0.01" min="0" name="cost" id="shopify_cost" class="pai-input" value="{{ old('cost', $form['cost'] ?? '') }}">
                    </div>
                    <div class="pai-field">
                        <label for="shopify_type">Type</label>
                        <select name="product_type" id="shopify_type" class="pai-input pai-select" required data-pai-type-select>
                            <option value="">Select type…</option>
                            @foreach($typeOptions as $value => $label)
                                <option value="{{ $value }}" @selected($selectedType === $value)>{{ $label }}</option>
                            @endforeach
                            @if($selectedType && !isset($typeOptions[$selectedType]))
                                <option value="{{ $selectedType }}" selected>{{ $selectedType }}</option>
                            @endif
                        </select>
                    </div>
                    <div class="pai-field">
                        <label for="shopify_category">Category</label>
                        <select name="category_id" id="shopify_category" class="pai-input pai-select" data-pai-category-select>
                            <option value="">Select category…</option>
                            @foreach($categoryOptions as $catId => $catLabel)
                                <option value="{{ $catId }}" @selected($selectedCategoryId === $catId)>{{ $catLabel }}</option>
                            @endforeach
                        </select>
                        <span class="pai-hint" style="margin-top:0.35rem;">Shopify Standard Category (admin Category column).</span>
                    </div>
                    <div class="pai-field">
                        <label for="shopify_template">Theme template</label>
                        <select name="template_suffix" id="shopify_template" class="pai-input pai-select" data-pai-template-select>
                            @foreach($themeTemplateOptions as $tplValue => $tplLabel)
                                <option value="{{ $tplValue }}" @selected((string)$selectedTemplateSuffix === (string)$tplValue)>{{ $tplLabel }}</option>
                            @endforeach
                            @if($selectedTemplateSuffix !== '' && $selectedTemplateSuffix !== null && !isset($themeTemplateOptions[$selectedTemplateSuffix]))
                                <option value="{{ $selectedTemplateSuffix }}" selected>{{ $selectedTemplateSuffix }}</option>
                            @endif
                        </select>
                        <span class="pai-hint" style="margin-top:0.35rem;">Online Store template (bracelets, rings, pendants…).</span>
                    </div>
                    <div class="pai-field">
                        <label for="shopify_vendor">Vendor</label>
                        <input type="text" name="vendor" id="shopify_vendor" class="pai-input" value="{{ old('vendor', $form['vendor'] ?? $defaultVendor) }}" required>
                    </div>
                    <div class="pai-field pai-field--full">
                        <label for="shopify_tags">Tags</label>
                        <input type="text" name="tags" id="shopify_tags" class="pai-input" value="{{ $selectedTags }}" placeholder="Comma-separated" data-pai-tags-input>
                    </div>
                    <div class="pai-field pai-field--full">
                        <label for="pai-collection-search">Primary collection (one)</label>
                        <input type="text" id="pai-collection-search" class="pai-input" value="{{ $selectedCollectionTitle }}" placeholder="Search collection by title…" autocomplete="off">
                        <input type="hidden" name="collection_id" id="pai-collection-id" value="{{ $selectedCollectionId }}">
                        <input type="hidden" name="collection_title" id="pai-collection-title" value="{{ $selectedCollectionTitle }}">
                        <div id="pai-collection-results" class="pai-collection-results" hidden></div>
                        <span class="pai-hint" style="margin-top:0.35rem;">Optional. Leave empty to skip. Guided collections are also added on sync.</span>
                    </div>
                    <div class="pai-field pai-field--full">
                        <label style="display:flex;align-items:flex-start;gap:0.55rem;cursor:pointer;font-weight:500;">
                            <input type="checkbox" name="update_handle" value="1" style="margin-top:0.2rem;">
                            <span>
                                Also update URL handle to match the current title
                                <span class="pai-hint" style="display:block;margin-top:0.25rem;font-weight:400;">
                                    Off by default — keeps the existing product URL. Turn on only to fix a wrong handle (e.g. “earrings” when the piece is a pendant). Changing the handle can break old links.
                                </span>
                            </span>
                        </label>
                    </div>
                </div>
                <div class="pai-actions" id="pai-shopify-update-actions">
                    <button type="submit"
                            class="btn {{ $import->isAutoRunning() ? 'pai-shopify-sync-locked' : 'btn-primary' }}"
                            id="pai-shopify-update-btn"
                            @disabled(trim((string)$import->title)==='' || $media->isEmpty() || $import->isAutoRunning())
                            @if($import->isAutoRunning()) aria-disabled="true" @endif
                            title="{{ $import->isAutoRunning() ? 'Wait until Auto finishes, then sync.' : ($import->isBackgroundBusy() ? 'Queues behind the current job (1-by-1).' : '') }}">
                        {{ $import->isAutoRunning() ? 'Update Shopify (Auto running)' : ($import->isBackgroundBusy() ? 'Queue Update Shopify' : 'Update Shopify') }}
                    </button>
                    @if($adminUrl)
                        <a href="{{ $adminUrl }}" target="_blank" rel="noopener" class="btn btn-secondary">Open in Shopify</a>
                    @endif
                    <p class="pai-hint" style="flex-basis:100%;margin:0.35rem 0 0;">
                        Prefer the blue <strong>Update Shopify</strong> bar at the top when you see “pending” — it always syncs saved data.
                        After you confirm, watch the dark <strong>Working</strong> banner; when it finishes the pending bar should disappear and “Last synced” updates.
                    </p>
                </div>
            </form>
        @else
            @include('product_ai_import.partials.guide_from_product')

            @if(count($guideColorValues))
                <div class="pai-wiz-callout" style="margin-bottom:1rem;">
                    <strong>Color variants from guide</strong>
                    <div>{{ $guideColorOption }}: {{ implode(', ', $guideColorValues) }}</div>
                </div>
            @endif

            <form action="{{ route('product-ai-import.create-shopify-draft', $import) }}" method="POST" class="pai-form" id="pai-shopify-form" data-pai-lux-loader="shopify">
                @csrf
                <input type="hidden" name="wizard_step" value="shopify">
                <input type="hidden" name="guide_product_id" id="pai-guide-hidden-id" value="{{ $guideProductId ?? '' }}">
                <input type="hidden" name="guide_product_title" id="pai-guide-hidden-title" value="{{ $guideProductTitle ?? '' }}">
                <div id="pai-guide-collection-ids">
                    @foreach($selectedCollectionIds as $cid)
                        <input type="hidden" name="collection_ids[]" value="{{ $cid }}">
                    @endforeach
                </div>

                @include('product_ai_import.partials.guide_metafields_editor')

                <div class="pai-fields">
                    <div class="pai-field">
                        <label for="shopify_sku">SKU <span class="pai-optional">(required)</span></label>
                        <input type="text" name="sku" id="shopify_sku" class="pai-input" value="{{ old('sku', $import->sku) }}" required maxlength="120">
                    </div>
                    <div class="pai-field">
                        <label for="shopify_inventory">Inventory qty <span class="pai-optional">(per variant)</span></label>
                        <input type="number" name="inventory" id="shopify_inventory" class="pai-input" value="{{ old('inventory', $form['inventory'] ?? 10) }}" min="0" required>
                        <span class="pai-hint" style="margin-top:0.35rem;">Default 10. Same stock is applied to every color/metal variant on sync.</span>
                    </div>
                    <div class="pai-field">
                        <label for="shopify_price">Sale price</label>
                        <input type="number" step="0.01" min="0" name="price" id="shopify_price" class="pai-input" value="{{ old('price', $form['price'] ?? '') }}" required>
                    </div>
                    <div class="pai-field">
                        <label for="shopify_compare">Compare-at price</label>
                        <input type="number" step="0.01" min="0" name="compare_at_price" id="shopify_compare" class="pai-input" value="{{ old('compare_at_price', $form['compare_at_price'] ?? '') }}">
                    </div>
                    <div class="pai-field">
                        <label for="shopify_cost">Cost per item</label>
                        <input type="number" step="0.01" min="0" name="cost" id="shopify_cost" class="pai-input" value="{{ old('cost', $form['cost'] ?? '') }}">
                    </div>
                    <div class="pai-field">
                        <label for="shopify_type">Type</label>
                        <select name="product_type" id="shopify_type" class="pai-input pai-select" required data-pai-type-select>
                            <option value="">Select type…</option>
                            @foreach($typeOptions as $value => $label)
                                <option value="{{ $value }}" @selected($selectedType === $value)>{{ $label }}</option>
                            @endforeach
                            @if($selectedType && !isset($typeOptions[$selectedType]))
                                <option value="{{ $selectedType }}" selected>{{ $selectedType }}</option>
                            @endif
                        </select>
                    </div>
                    <div class="pai-field">
                        <label for="shopify_category">Category</label>
                        <select name="category_id" id="shopify_category" class="pai-input pai-select" data-pai-category-select>
                            <option value="">Select category…</option>
                            @foreach($categoryOptions as $catId => $catLabel)
                                <option value="{{ $catId }}" @selected($selectedCategoryId === $catId)>{{ $catLabel }}</option>
                            @endforeach
                        </select>
                        <span class="pai-hint" style="margin-top:0.35rem;">Shopify Standard Category (admin Category column).</span>
                    </div>
                    <div class="pai-field">
                        <label for="shopify_template">Theme template</label>
                        <select name="template_suffix" id="shopify_template" class="pai-input pai-select" data-pai-template-select>
                            @foreach($themeTemplateOptions as $tplValue => $tplLabel)
                                <option value="{{ $tplValue }}" @selected((string)$selectedTemplateSuffix === (string)$tplValue)>{{ $tplLabel }}</option>
                            @endforeach
                            @if($selectedTemplateSuffix !== '' && $selectedTemplateSuffix !== null && !isset($themeTemplateOptions[$selectedTemplateSuffix]))
                                <option value="{{ $selectedTemplateSuffix }}" selected>{{ $selectedTemplateSuffix }}</option>
                            @endif
                        </select>
                        <span class="pai-hint" style="margin-top:0.35rem;">Online Store template (bracelets, rings, pendants…).</span>
                    </div>
                    <div class="pai-field">
                        <label for="shopify_vendor">Vendor</label>
                        <input type="text" name="vendor" id="shopify_vendor" class="pai-input" value="{{ old('vendor', $form['vendor'] ?? $defaultVendor) }}" required>
                    </div>
                    <div class="pai-field pai-field--full">
                        <label for="shopify_tags">Tags</label>
                        <input type="text" name="tags" id="shopify_tags" class="pai-input" value="{{ $selectedTags }}" placeholder="Comma-separated" data-pai-tags-input>
                    </div>
                    <div class="pai-field pai-field--full">
                        <label for="pai-collection-search">Primary collection (one)</label>
                        <input type="text" id="pai-collection-search" class="pai-input" value="{{ $selectedCollectionTitle }}" placeholder="Search collection by title…" autocomplete="off">
                        <input type="hidden" name="collection_id" id="pai-collection-id" value="{{ $selectedCollectionId }}">
                        <input type="hidden" name="collection_title" id="pai-collection-title" value="{{ $selectedCollectionTitle }}">
                        <div id="pai-collection-results" class="pai-collection-results" hidden></div>
                        <span class="pai-hint" style="margin-top:0.35rem;">Optional. Leave empty to skip. Guided collections are also added on create.</span>
                    </div>
                </div>
                <div class="pai-actions">
                    <button type="submit"
                            class="btn {{ $import->isAutoRunning() ? 'pai-shopify-sync-locked' : 'btn-primary' }}"
                            id="pai-shopify-create-btn"
                            @disabled(trim((string)$import->title)==='' || $media->isEmpty() || $import->isAutoRunning())
                            @if($import->isAutoRunning()) aria-disabled="true" @endif
                            title="{{ $import->isAutoRunning() ? 'Wait until Auto finishes, then create the draft.' : ($import->isBackgroundBusy() ? 'Queues behind the current job (1-by-1).' : '') }}">
                        {{ $import->isAutoRunning() ? 'Create Shopify Draft (Auto running)' : ($import->isBackgroundBusy() ? 'Queue Create Shopify Draft' : 'Create Shopify Draft') }}
                    </button>
                </div>
            </form>
        @endif
    </section>
    @endif


    <footer class="pai-wiz-footer">
        <div class="pai-wiz-footer-left">
            @if($prevStep)
                <a href="{{ $stepUrl($prevStep) }}" class="btn btn-secondary">← {{ $wizardSteps[$prevStep]['label'] }}</a>
            @endif
            @if($import->canDeleteFromApp())
                <form action="{{ route('product-ai-import.destroy', $import) }}" method="POST" class="pai-wiz-delete-form" id="pai-wiz-delete-form" style="display:inline;">
                    @csrf
                    @method('DELETE')
                    <button type="button" class="btn btn-danger pai-wiz-cancel" id="pai-wiz-delete-btn">Delete import</button>
                </form>
            @endif
        </div>
        <div class="pai-wiz-footer-right">
            @if($nextStep)
                <a href="{{ $stepUrl($nextStep) }}"
                   class="btn btn-primary"
                   @if($nextStep === 'details' && ! empty($detailsNeedsCopy)) data-pai-nav-loader="copy" @endif
                >Continue to {{ $wizardSteps[$nextStep]['label'] }} →</a>
            @endif
        </div>
    </footer>
</div>

@include('product_ai_import.partials.luxury-loader')

{{-- Lightbox --}}
<div class="pai-lb" id="pai-lightbox" hidden>
    <div class="pai-lb-backdrop" data-pai-lb-close></div>
    <div class="pai-lb-dialog" role="dialog" aria-modal="true" aria-label="Media preview">
        <button type="button" class="pai-lb-close" data-pai-lb-close aria-label="Close">×</button>
        <div class="pai-lb-title" id="pai-lb-title"></div>
        <div class="pai-lb-body" id="pai-lb-body"></div>
        <div class="pai-lb-actions">
            <a href="#" id="pai-lb-open-tab" target="_blank" rel="noopener" class="btn btn-secondary">Open in new tab</a>
            <a href="#" id="pai-lb-orig" target="_blank" rel="noopener" class="btn btn-secondary" hidden>View original</a>
        </div>
    </div>
</div>

{{-- Edit with AI (Lifestyle history + Enhance versions) — generate prompts stay untouched --}}
<div class="pai-ai-edit" id="pai-ai-edit-modal" hidden>
    <div class="pai-ai-edit-backdrop" data-pai-ai-edit-close></div>
    <div class="pai-ai-edit-dialog" role="dialog" aria-modal="true" aria-labelledby="pai-ai-edit-title">
        <header class="pai-ai-edit-head">
            <div>
                <p class="pai-ai-edit-kicker">Refine existing image</p>
                <h3 id="pai-ai-edit-title">Edit with AI</h3>
            </div>
            <button type="button" class="pai-ai-edit-x" data-pai-ai-edit-close aria-label="Close">×</button>
        </header>
        <div class="pai-ai-edit-body">
            <div class="pai-ai-edit-preview">
                <img id="pai-ai-edit-thumb" src="" alt="Image to edit">
            </div>
            <form id="pai-ai-edit-form" method="POST" action="#" data-pai-lux-loader="lifestyle" class="pai-ai-edit-form">
                @csrf
                <p class="pai-hint pai-ai-edit-hint">
                    Works on this image only. Creates a <strong>new</strong> history version and selects it for Shopify.
                    The generate / enhance Settings prompt is not changed.
                </p>
                <label class="pai-label" for="pai-ai-edit-prompt">What to change</label>
                <textarea id="pai-ai-edit-prompt"
                          name="edit_prompt"
                          class="pai-textarea"
                          rows="3"
                          maxlength="4000"
                          required
                          placeholder="Examples: make the ring look smaller · change metal to rose gold · soften the shadow"></textarea>
                <label class="pai-label" for="pai-ai-edit-provider">AI engine</label>
                <select id="pai-ai-edit-provider" name="image_ai_provider" class="pai-input pai-select">
                    <option value="google">Google</option>
                    <option value="openai">OpenAI</option>
                </select>
                <div class="pai-ai-edit-actions">
                    <button type="button" class="btn btn-secondary" data-pai-ai-edit-close>Cancel</button>
                    <button type="submit" class="btn btn-primary" id="pai-ai-edit-submit">Apply edit</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
@include('product_ai_import.partials.styles')
<style>
.pai-wizard { max-width: none; width: 100%; margin: 0 auto; }
.pai-wiz-top { margin-bottom: 1.25rem; }
.pai-wiz-back { font-size: 0.88rem; color: #2563eb; text-decoration: none; display: inline-block; margin-bottom: 0.75rem; }
.pai-wiz-back:hover { text-decoration: underline; }
.pai-wiz-brand {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
    color: #fff; border-radius: 14px; padding: 1.35rem 1.5rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(255,255,255,0.06);
}
.pai-wiz-kicker {
    display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: #93c5fd; font-weight: 600; margin-bottom: 0.35rem;
}
.pai-wiz-brand h1 { margin: 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; }
.pai-wiz-brand p { margin: 0.4rem 0 0; color: #cbd5e1; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pai-wiz-status {
    display: inline-block; background: rgba(37,99,235,0.25); color: #bfdbfe;
    border: 1px solid rgba(147,197,253,0.35); border-radius: 999px; padding: 0.12rem 0.55rem;
    font-size: 0.72rem; font-weight: 600;
}

.pai-sync-gate {
    display: flex; gap: 1rem; align-items: flex-start;
    margin: 0 0 1.25rem; padding: 1.15rem 1.25rem;
    border-radius: 12px; border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pai-sync-gate-mark {
    flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.pai-sync-gate-body { flex: 1; min-width: 0; }
.pai-sync-gate-body h2 {
    margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; color: #0f172a;
}
.pai-sync-gate-body > p { margin: 0 0 0.65rem; color: #475569; font-size: 0.92rem; line-height: 1.45; }
.pai-sync-gate-kicker {
    font-size: 0.7rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
    color: #b45309; margin-bottom: 0.25rem;
}
.pai-sync-gate-hint { color: #64748b !important; font-size: 0.86rem !important; }
.pai-sync-gate-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.pai-sync-gate--ok { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4 0%, #fff 70%); }
.pai-sync-gate--ok .pai-sync-gate-mark { background: #dcfce7; color: #15803d; }
.pai-sync-gate--blocked { border-color: #fcd34d; background: linear-gradient(180deg, #fffbeb 0%, #fff 72%); }
.pai-sync-gate--blocked .pai-sync-gate-mark { background: #fef3c7; color: #b45309; }
.pai-sync-gate--fail { border-color: #fecaca; background: linear-gradient(180deg, #fef2f2 0%, #fff 72%); }
.pai-sync-gate--fail .pai-sync-gate-mark { background: #fee2e2; color: #b91c1c; }
.pai-sync-blockers {
    list-style: none; margin: 0.85rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.55rem;
}
.pai-sync-blockers li {
    padding: 0.75rem 0.85rem; border-radius: 10px;
    background: #fff; border: 1px solid #fde68a;
}
.pai-sync-blocker-title { font-weight: 650; color: #92400e; font-size: 0.9rem; }
.pai-sync-blocker-detail { margin-top: 0.2rem; color: #57534e; font-size: 0.86rem; line-height: 1.4; }
.pai-sync-blocker-link {
    display: inline-block; margin-top: 0.45rem; font-size: 0.82rem; font-weight: 600;
    color: #b45309; text-decoration: none;
}
.pai-sync-blocker-link:hover { text-decoration: underline; }
.pai-sync-warnings {
    margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid #fde68a;
}
.pai-sync-warnings-label {
    font-size: 0.7rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: #78716c;
}
.pai-sync-warnings ul { margin: 0.35rem 0 0; padding-left: 1.1rem; color: #57534e; font-size: 0.84rem; }
.pai-sync-warnings li { margin: 0.2rem 0; }

/* Fixed chrome when scrolling (sticky fails under body overflow-x:hidden) */
.pai-wiz-sticky {
    position: relative;
    z-index: 80;
    margin: 0 0 1.25rem;
    padding: 0.55rem 0 0.65rem;
    background: #f8fafc;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;
    overflow-anchor: none;
}
body.pai-wiz-page {
    overflow-anchor: none;
}
.pai-wiz-sticky.is-stuck {
    position: fixed;
    margin: 0;
    padding: 0.35rem 0.65rem 0.4rem;
    background: rgba(255, 255, 255, 0.98);
    border-bottom-color: #e2e8f0;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Compact bars only — no tall scroll panel covering Photos / Enhance */
    max-height: none;
    overflow: visible;
}
#pai-wiz-sticky-ph {
    display: none;
    width: 100%;
    pointer-events: none;
}
.pai-wiz-sticky #pai-pipeline-status:empty { display: none; }
.pai-wiz-sticky .pai-pipe-banner {
    margin-bottom: 0.55rem;
    padding: 0.75rem 0.95rem;
}
.pai-wiz-sticky .pai-pipe-banner h2 { font-size: 0.98rem; }
.pai-wiz-sticky .pai-pipe-banner p { font-size: 0.85rem; }
.pai-wiz-sticky .pai-pipe-banner-actions { margin-top: 0.55rem; }
.pai-wiz-sticky .pai-bg-banner {
    margin-bottom: 0.55rem;
}
.pai-wiz-sticky .pai-wiz-steps {
    margin: 0;
}

/* Stuck = one-line action bars so content below stays readable */
.pai-wiz-sticky.is-stuck .pai-bg-banner {
    margin-bottom: 0.35rem;
    padding: 0.4rem 0.65rem;
    align-items: center;
    gap: 0.55rem;
    border-radius: 10px;
}
.pai-wiz-sticky.is-stuck .pai-bg-banner-mark { padding-top: 0; }
.pai-wiz-sticky.is-stuck .pai-bg-spinner {
    width: 1.05rem;
    height: 1.05rem;
}
.pai-wiz-sticky.is-stuck .pai-bg-banner-kicker { display: none; }
.pai-wiz-sticky.is-stuck .pai-bg-banner h2 {
    margin: 0;
    font-size: 0.84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pai-wiz-sticky.is-stuck .pai-bg-banner > .pai-bg-banner-body > #pai-bg-banner-msg,
.pai-wiz-sticky.is-stuck .pai-bg-queue {
    display: none !important;
}
.pai-wiz-sticky.is-stuck .pai-bg-banner-actions { padding-top: 0; }
.pai-wiz-sticky.is-stuck .pai-bg-banner-link { display: none; }
.pai-wiz-sticky.is-stuck .pai-bg-stop-btn {
    padding: 0.28rem 0.55rem;
    font-size: 0.76rem;
}

.pai-wiz-sticky.is-stuck .pai-pipe-banner {
    margin-bottom: 0.35rem;
    padding: 0.4rem 0.65rem;
    align-items: center;
    border-radius: 10px;
}
.pai-wiz-sticky.is-stuck .pai-pipe-banner-body {
    display: flex;
    align-items: center;
    gap: 0.55rem 0.75rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.pai-wiz-sticky.is-stuck .pai-pipe-banner-kicker {
    display: none;
}
.pai-wiz-sticky.is-stuck .pai-pipe-banner h2 {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.pai-wiz-sticky.is-stuck .pai-pipe-banner p,
.pai-wiz-sticky.is-stuck .pai-pipe-banner-meta,
.pai-wiz-sticky.is-stuck .pai-pipe-quiet-link,
.pai-wiz-sticky.is-stuck .pai-pipe-locked-hint {
    display: none !important;
}
.pai-wiz-sticky.is-stuck .pai-pipe-banner-actions {
    margin-top: 0;
    flex: 0 0 auto;
}
.pai-wiz-sticky.is-stuck .pai-pipe-banner-actions .btn {
    padding: 0.28rem 0.65rem;
    font-size: 0.76rem;
}

.pai-wiz-sticky.is-stuck .pai-wiz-steps {
    padding: 0.4rem 0.5rem;
    border-radius: 10px;
}
.pai-wiz-sticky.is-stuck .pai-wiz-step {
    padding: 0.3rem 0.4rem;
    min-width: 96px;
    gap: 0.4rem;
}
.pai-wiz-sticky.is-stuck .pai-wiz-step-num {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.72rem;
}
.pai-wiz-sticky.is-stuck .pai-wiz-step-text strong { font-size: 0.78rem; }
.pai-wiz-sticky.is-stuck .pai-wiz-step-text small { display: none; }

/* Keep section titles clear of the pinned chrome */
.pai-wiz-page .pai-wiz-panel-head,
.pai-wiz-page .pai-wiz-sub > div > h3,
.pai-wiz-page .pai-wiz-sub h3 {
    scroll-margin-top: calc(var(--pai-sticky-offset, 7rem) + 0.75rem);
}

@media (max-width: 700px) {
    .pai-wiz-sticky.is-stuck .pai-bg-banner,
    .pai-wiz-sticky.is-stuck .pai-pipe-banner {
        flex-wrap: wrap;
    }
    .pai-wiz-sticky.is-stuck .pai-pipe-banner-body {
        flex-wrap: wrap;
    }
    .pai-wiz-sticky.is-stuck .pai-bg-banner-actions,
    .pai-wiz-sticky.is-stuck .pai-pipe-banner-actions {
        width: 100%;
    }
    .pai-wiz-sticky .pai-wiz-step-text small { display: none; }
}

.pai-wiz-steps {
    display: flex; align-items: stretch; gap: 0; margin: 1.25rem 0 1.5rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0.65rem 0.75rem;
    overflow-x: auto;
}
.pai-wiz-step {
    display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: #64748b;
    padding: 0.45rem 0.55rem; border-radius: 10px; flex: 1; min-width: 120px;
    transition: background 0.15s, color 0.15s;
}
.pai-wiz-step:hover { background: #f8fafc; color: #0f172a; }
.pai-wiz-step.is-active { background: #eff6ff; color: #1d4ed8; }
.pai-wiz-step.is-done { color: #0f172a; }
.pai-wiz-step-num {
    width: 1.75rem; height: 1.75rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; background: #e2e8f0; color: #334155; flex-shrink: 0;
}
.pai-wiz-step.is-active .pai-wiz-step-num { background: #2563eb; color: #fff; }
.pai-wiz-step.is-done .pai-wiz-step-num { background: #0f172a; color: #fff; }
.pai-wiz-step-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pai-wiz-step-text strong { font-size: 0.82rem; font-weight: 700; }
.pai-wiz-step-text small { font-size: 0.7rem; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pai-wiz-rail {
    width: 18px; flex-shrink: 0; align-self: center; height: 2px;
    background: linear-gradient(90deg, #e2e8f0, #cbd5e1); border-radius: 2px;
}

.pai-wiz-panel {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    padding: 1.5rem; box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pai-wiz-panel-head {
    display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
    margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid #f1f5f9;
}
.pai-wiz-panel-head h2 { margin: 0 0 0.35rem; font-size: 1.25rem; color: #0f172a; letter-spacing: -0.02em; }
.pai-wiz-panel-head p { margin: 0; color: #64748b; font-size: 0.92rem; line-height: 1.45; max-width: 46rem; }
.pai-wiz-stat {
    text-align: right; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.55rem 0.85rem;
}
.pai-wiz-stat strong { display: block; font-size: 1.35rem; color: #0f172a; line-height: 1.1; }
.pai-wiz-stat span { font-size: 0.75rem; color: #64748b; }
.pai-wiz-sub {
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #f1f5f9;
}
.pai-prepare-summary {
    display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
    margin: 0 0 1.1rem; padding: 0.75rem 0.85rem;
    background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1px solid #e2e8f0; border-radius: 12px;
}
.pai-prepare-pill {
    display: inline-flex; align-items: center;
    border-radius: 999px; padding: 0.22rem 0.65rem;
    font-size: 0.75rem; font-weight: 700;
    background: #fff; border: 1px solid #e2e8f0; color: #334155;
}
.pai-prepare-pill--ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.pai-prepare-pill--warn { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.pai-prepare-more-form { margin: 0 0 0 auto; }
.pai-prepare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
}
.pai-prepare-card {
    border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; background: #fff;
    display: flex; flex-direction: column;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pai-prepare-card.is-ready { border-color: #bbf7d0; }
.pai-prepare-card.is-pending { border-color: #fed7aa; }
.pai-prepare-media {
    position: relative; aspect-ratio: 1.25; background: #f8fafc;
}
.pai-prepare-media .pai-media-open {
    display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in;
}
.pai-prepare-media img,
.pai-prepare-media video {
    display: block; width: 100%; height: 100%; object-fit: contain; background: #fff;
}
.pai-prepare-media .pai-chip {
    position: absolute; top: 0.4rem; left: 0.4rem; z-index: 2;
}
.pai-prepare-media .pai-chip--ai { left: auto; right: 0.4rem; }
.pai-prepare-video-badge {
    position: absolute; right: 0.4rem; top: 0.4rem; z-index: 3;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
    color: #fff; background: #0f766e; border-radius: 6px; padding: 0.15rem 0.45rem;
}
.pai-prepare-play {
    position: absolute; left: 50%; top: 50%; z-index: 2;
    transform: translate(-50%, -50%);
    width: 2.4rem; height: 2.4rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
    pointer-events: none;
}
.pai-prepare-play svg { display: block; margin-left: 2px; }
.pai-prepare-card--video .pai-prepare-media::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.22), transparent 42%);
    pointer-events: none;
}
.pai-prepare-card--video .pai-media-open { position: relative; }
.pai-prep-badge--video { background: #ccfbf1; color: #0f766e; }
.pai-prepare-body { padding: 0.7rem 0.75rem 0.85rem; }
.pai-prepare-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.45rem; }
.pai-prep-badge {
    display: inline-flex; border-radius: 999px; padding: 0.12rem 0.45rem;
    font-size: 0.68rem; font-weight: 700; background: #f1f5f9; color: #475569;
}
.pai-prep-badge.is-on { background: #ecfdf5; color: #047857; }
.pai-prepare-file {
    font-size: 0.72rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 0.35rem;
}
.pai-prepare-alt {
    font-size: 0.78rem; color: #0f172a; line-height: 1.35;
}
.pai-prepare-alt-label {
    display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #94a3b8; margin-right: 0.25rem;
}
.pai-wiz-sub h3 { margin: 0 0 0.5rem; font-size: 1rem; color: #0f172a; }
.pai-listing-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.pai-listing-head-row h3 { margin: 0; }
.pai-listing-autosave {
    margin: 0 !important;
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
}
.pai-listing-autosave.is-saving { color: #2563eb; }
.pai-listing-autosave.is-saved { color: #059669; }
.pai-listing-autosave.is-error { color: #dc2626; }
.pai-mf-autosave.is-saving { color: #2563eb; }
.pai-mf-autosave.is-saved { color: #059669; }
.pai-mf-autosave.is-error { color: #dc2626; }
.pai-listing-block {
    margin: 0 0 1.35rem;
    padding: 1.1rem 1.15rem 0.35rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pai-listing-block-head {
    margin: 0 0 0.95rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #f1f5f9;
}
.pai-listing-block-head h4 {
    margin: 0 0 0.2rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.pai-listing-block-head p {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
}
.pai-title-pick {
    margin-top: 0.25rem;
}
.pai-title-pick-head {
    display: flex; flex-wrap: wrap; gap: 0.65rem 1rem;
    align-items: flex-end; justify-content: space-between;
    margin-bottom: 0.85rem;
}
.pai-title-pick-badge {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 999px; padding: 0.28rem 0.65rem;
}
.pai-title-pick-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;
}
@media (max-width: 900px) {
    .pai-title-pick-grid { grid-template-columns: 1fr; }
}
.pai-title-card {
    position: relative; display: flex; flex-direction: column; gap: 0.55rem;
    margin: 0; padding: 0.9rem 0.95rem 0.85rem;
    border: 1px solid #e2e8f0; border-radius: 14px; background: #fff;
    cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    min-height: 100%;
}
.pai-title-card:hover {
    border-color: #93c5fd; transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.pai-title-card.is-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    background: linear-gradient(180deg, #f8fbff 0%, #fff 55%);
}
.pai-title-card-input {
    position: absolute; opacity: 0; pointer-events: none;
}
.pai-title-card-top {
    display: flex; align-items: center; gap: 0.45rem;
}
.pai-title-card-letter {
    width: 1.45rem; height: 1.45rem; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; color: #1e3a8a; background: #dbeafe;
}
.pai-title-card.is-selected .pai-title-card-letter {
    color: #fff; background: #2563eb;
}
.pai-title-card-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: #64748b;
}
.pai-title-card-check {
    margin-left: auto; width: 1.25rem; height: 1.25rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 800; color: transparent; background: #e2e8f0;
}
.pai-title-card.is-selected .pai-title-card-check {
    color: #fff; background: #2563eb;
}
.pai-title-card-text {
    font-size: 0.95rem; font-weight: 650; color: #0f172a; line-height: 1.35;
    letter-spacing: -0.01em;
}
.pai-title-card-meta {
    font-size: 0.72rem; color: #94a3b8; font-weight: 600;
}
.pai-title-pick-toast {
    margin-top: 0.65rem; color: #059669; font-weight: 600;
}
.pai-copy-pending-card {
    border: 1px dashed #93c5fd; border-radius: 14px; background: #f8fbff;
    padding: 1.35rem 1.25rem; text-align: center;
}
.pai-copy-pending-card strong {
    display: block; color: #1e3a8a; font-size: 0.98rem; margin-bottom: 0.35rem;
}
.pai-copy-pending-card p {
    margin: 0; color: #64748b; font-size: 0.88rem; line-height: 1.45;
}
.pai-textarea--short { min-height: 4.5rem; }
.pai-textarea--seo { min-height: 4.25rem; line-height: 1.45; }
.pai-rte {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.pai-rte:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.pai-rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border-bottom: 1px solid #e2e8f0;
}
.pai-rte-btn {
    appearance: none;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 6px;
    padding: 0.22rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.3;
}
.pai-rte-btn:hover { border-color: #94a3b8; background: #f8fafc; }
.pai-rte-btn.is-active { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.pai-rte-btn--ghost { font-weight: 500; color: #64748b; }
.pai-rte-sep {
    width: 1px;
    height: 1.1rem;
    background: #cbd5e1;
    margin: 0 0.15rem;
}
.pai-rte-surface {
    min-height: 18rem;
    max-height: 34rem;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #0f172a;
    outline: none;
    background: #fcfcfd;
}
.pai-rte-surface p { margin: 0 0 0.85rem; }
.pai-rte-surface p:last-child { margin-bottom: 0; }
.pai-rte-surface strong, .pai-rte-surface b { font-weight: 700; color: #0f172a; }
.pai-rte-surface ul { margin: 0 0 0.85rem; padding-left: 1.25rem; }
.pai-rte-surface.is-empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}
.pai-rte-source {
    min-height: 18rem;
    border: 0;
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    background: #0f172a;
    color: #e2e8f0;
}
.pai-rte.is-source .pai-rte-surface { display: none; }
.pai-rte.is-source .pai-rte-source { display: block !important; }
.pai-wiz-actions-bar {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.25rem;
    padding: 0.85rem; background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1px solid #e2e8f0; border-radius: 10px;
}
.pai-wiz-actions-bar form { margin: 0; }
.pai-wiz-advanced { margin-left: 0.25rem; font-size: 0.85rem; color: #64748b; }
.pai-wiz-advanced summary { cursor: pointer; user-select: none; padding: 0.35rem 0.25rem; }
.pai-wiz-advanced-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.pai-life-pick {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pai-life-pick:hover { border-color: #93c5fd; }
.pai-life-pick.is-selected {
    border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.pai-life-pick.has-shopify-enhance {
    border-color: #c4b5fd;
}
.pai-life-pick.has-shopify-enhance.is-selected {
    border-color: #2563eb;
}
.pai-life-pick-main { display: block; cursor: pointer; position: relative; }
.pai-life-pick-input { position: absolute; opacity: 0; pointer-events: none; }
.pai-life-pick-check {
    position: absolute; top: 0.4rem; right: 0.4rem; z-index: 2;
    width: 1.55rem; height: 1.55rem; border-radius: 999px;
    background: #e2e8f0; color: transparent; font-size: 0.85rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.pai-life-pick.is-selected .pai-life-pick-check { background: #2563eb; color: #fff; }
.pai-life-pick-thumb { display: block; background: #fff; }
.pai-life-pick-thumb img {
    display: block; width: 100%; aspect-ratio: 1.25; object-fit: contain; background: #fff;
}
.pai-life-pick-meta {
    padding: 0.4rem 0.5rem; font-size: 0.72rem; color: #64748b; word-break: break-all;
}
.pai-life-pick-actions {
    display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0.5rem 0.55rem;
}
.pai-life-pick-view,
.pai-life-pick-one {
    margin: 0; align-self: flex-start;
    border: 0; background: #f1f5f9; color: #0f172a; border-radius: 6px;
    font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.5rem; cursor: pointer;
    line-height: 1.2;
}
.pai-life-pick-view:hover,
.pai-life-pick-one:hover { background: #e2e8f0; }
.pai-life-pick-one {
    background: #eef2ff; color: #3730a3;
}
.pai-life-pick-one:hover { background: #e0e7ff; }
.pai-life-pick .pai-chip { z-index: 2; }
.pai-chip--upload { background: #b45309 !important; }
.pai-chip--photoroom { background: #0e7490 !important; }
.pai-chip--enhance { background: #7c3aed !important; }
.pai-chip--worn { background: #0f766e !important; color: #ecfdf5 !important; }
.pai-chip--meas { background: #a16207 !important; color: #fefce8 !important; }
.pai-life-pick.is-worn-skip { opacity: 0.88; }
.pai-life-pick.is-worn-skip:not(.is-selected) { border-style: dashed; }
.pai-life-pick.is-meas-skip { opacity: 0.9; }
.pai-life-hist-card > .pai-chip {
    z-index: 4;
    max-width: calc(100% - 0.7rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pai-life-selected-mark {
    position: absolute; left: 0.45rem; right: 0.45rem; bottom: 0.45rem; z-index: 3;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
    color: #fff; background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px; padding: 0.35rem 0.55rem;
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
    pointer-events: none;
}
.pai-life-selected-mark[hidden] { display: none !important; }
.pai-life-selected-mark svg { flex: 0 0 auto; }
.pai-media-card--shopify {
    border-color: #0f172a;
    box-shadow: 0 0 0 1px #0f172a, 0 8px 22px rgba(15, 23, 42, 0.08);
}
.pai-chip--upload { background: #92400e !important; }

.pai-enh-pairs { display: flex; flex-direction: column; gap: 1.15rem; }
.pai-enh-pair {
    border: 1px solid #e2e8f0; border-radius: 16px; padding: 1rem 1.05rem 1.1rem; background: #fff;
}
.pai-enh-pair.is-using-enhanced {
    border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
    background: linear-gradient(180deg, #f5f3ff 0%, #fff 38%);
}
.pai-enh-pair-head {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin-bottom: 0.75rem; font-size: 0.88rem; color: #0f172a;
}
.pai-enh-pair-status {
    margin-left: auto; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
    color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 0.22rem 0.65rem;
}
.pai-enh-one-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
}
.pai-enh-one-btn {
    margin-left: 0;
}
.pai-omni-meter {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem;
    min-width: 9.5rem; padding: 0.45rem 0.7rem; border-radius: 10px;
    background: #f8fafc; border: 1px solid #e2e8f0; color: #0f172a;
}
.pai-omni-meter-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.pai-omni-meter-hint, .pai-omni-meter-lock {
    font-size: 0.68rem; font-weight: 600; color: #64748b; text-align: right; max-width: 14rem; line-height: 1.35;
}
.pai-omni-meter.is-near { background: #fffbeb; border-color: #fcd34d; }
.pai-omni-meter.is-near .pai-omni-meter-hint { color: #b45309; }
.pai-omni-meter.is-blocked { background: #fef2f2; border-color: #fecaca; }
.pai-omni-meter.is-blocked .pai-omni-meter-lock { color: #b91c1c; }
.pai-enh-card-notes {
    margin: 0.55rem 0 0.75rem;
}
.pai-enh-card-notes .pai-textarea {
    min-height: 2.6rem;
    font-size: 0.88rem;
}
.pai-ai-provider-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem;
}
.pai-ai-provider-label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; font-weight: 650; color: #334155;
}
.pai-ai-provider-label--compact { font-weight: 600; }
.pai-ai-provider-select {
    width: auto !important; min-width: 8.5rem; max-width: 12rem;
    padding: 0.35rem 0.55rem; font-size: 0.82rem; margin: 0;
}
.pai-enh-engine-badge {
    position: absolute; left: 0.35rem; bottom: 0.35rem; z-index: 2;
    font-size: 0.62rem; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase;
    border-radius: 4px; padding: 0.12rem 0.35rem; color: #fff;
    background: #475569;
}
.pai-enh-engine-badge--google { background: #0f766e; }
.pai-enh-engine-badge--openai { background: #4338ca; }
.pai-enh-version-frame { position: relative; }
.pai-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.pai-enh-pair--pending { border-style: dashed; background: #fafafa; }
.pai-enh-empty p { margin: 0; }
.pai-enh-pair.is-using-enhanced .pai-enh-pair-status {
    color: #5b21b6; background: #ede9fe;
}
.pai-enh-pair-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;
}
@media (max-width: 700px) {
    .pai-enh-pair-grid { grid-template-columns: 1fr; }
}
.pai-enh-frame-caption {
    margin: 0 0 0.55rem; font-size: 0.78rem; color: #64748b; font-weight: 600;
}
.pai-enh-side {
    border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #0f172a08;
}
.pai-enh-side--ai { border-color: #ddd6fe; }
.pai-enh-side-label {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.5rem;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: #64748b; padding: 0.45rem 0.65rem; background: #fff; border-bottom: 1px solid #f1f5f9;
}
.pai-enh-side--ai .pai-enh-side-label { color: #6d28d9; }
.pai-enh-frame-badge {
    margin-left: auto; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em;
    color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 6px; padding: 0.1rem 0.4rem; text-transform: none;
}
.pai-enh-preview-tag {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: #6d28d9; background: #f5f3ff; border: 1px solid #ddd6fe;
    border-radius: 999px; padding: 0.12rem 0.45rem;
}
/* Exact Shopify product-page frame (Prepare ratio) — not a loose white letterbox */
.pai-enh-frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--pai-enh-frame, 1.25 / 1);
    background: #fff;
    overflow: hidden;
}
.pai-enh-frame .pai-media-open {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    padding: 0; border: 0; background: #fff; cursor: zoom-in;
}
.pai-enh-frame .pai-media-open img {
    display: block; width: 100%; height: 100%;
    object-fit: contain; object-position: center; background: #fff;
}
.pai-wiz-panel.is-enh-pendants .pai-enh-frame--contain .pai-media-open img {
    object-position: top center;
}
.pai-enh-frame--cover .pai-media-open img {
    object-fit: cover;
}
.pai-enh-frame.pai-enh-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.65rem; padding: 1rem; text-align: center; color: #64748b;
}
.pai-enh-scale-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1rem;
    margin: 0.85rem 0 1.1rem; padding: 0.75rem 0.95rem;
    border: 1px solid #e2e8f0; border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 80%);
}
.pai-enh-scale-copy { display: flex; align-items: baseline; gap: 0.45rem; min-width: 7.5rem; }
.pai-enh-scale-label {
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: #64748b;
}
.pai-enh-scale-value {
    font-size: 1.05rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums;
}
.pai-enh-scale-range {
    flex: 1 1 10rem; min-width: 8rem; max-width: 16rem; accent-color: #2563eb;
}
.pai-enh-scale-apply-form { margin: 0; }
.pai-enh-scale-hint { margin: 0; flex: 1 1 100%; font-size: 0.74rem; }
@media (min-width: 720px) {
    .pai-enh-scale-hint { flex: 0 1 auto; margin-left: auto; }
}
.pai-enh-versions { margin-top: 0.95rem; }
.pai-enh-versions-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 0.75rem;
    margin-bottom: 0.55rem; font-size: 0.82rem; font-weight: 700; color: #0f172a;
}
.pai-enh-version-rail {
    display: flex; gap: 0.65rem; overflow-x: auto; padding: 0.15rem 0.1rem 0.45rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    align-items: stretch;
}
.pai-enh-pick-form {
    position: relative; flex: 0 0 auto; width: 118px; scroll-snap-align: start; margin: 0;
}
.pai-enh-version {
    position: relative; display: block; width: 100%;
    border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; cursor: pointer;
    padding: 0; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    font: inherit; text-align: left; color: inherit; appearance: none; -webkit-appearance: none;
}
.pai-enh-version:hover { border-color: #c4b5fd; transform: translateY(-1px); }
.pai-enh-version.is-active {
    border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.18);
}
.pai-enh-version--original.is-active {
    border-color: #64748b; box-shadow: 0 0 0 2px rgba(100,116,139,0.18);
}
.pai-enh-version-input {
    position: absolute; opacity: 0; pointer-events: none;
}
.pai-enh-version-frame {
    display: block; position: relative; background: #fff;
    aspect-ratio: var(--pai-enh-frame, 1.25 / 1); overflow: hidden;
}
.pai-enh-version-frame img {
    display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #fff;
}
.pai-wiz-panel.is-enh-pendants .pai-enh-version-frame img {
    object-position: top center;
}
.pai-wiz-panel.is-enh-cover .pai-enh-version-frame img { object-fit: cover; }
.pai-enh-version-badge {
    position: absolute; top: 0.35rem; left: 0.35rem; z-index: 1;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff; background: #7c3aed; border-radius: 999px; padding: 0.12rem 0.4rem;
}
.pai-enh-version-meta {
    display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.45rem 0.5rem;
    background: #fff; border-top: 1px solid #f1f5f9;
}
.pai-enh-version-meta strong {
    font-size: 0.74rem; color: #0f172a; font-weight: 700;
}
.pai-enh-version-meta em {
    font-style: normal; font-size: 0.66rem; color: #94a3b8; line-height: 1.25;
}
.pai-enh-version-del {
    position: absolute; top: 0.3rem; right: 0.3rem; z-index: 2;
    width: 1.35rem; height: 1.35rem; border: 0; border-radius: 999px;
    background: rgba(15,23,42,0.72); color: #fff; font-size: 0.95rem; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s ease;
}
.pai-enh-version-edit {
    position: absolute; top: 0.3rem; right: 1.85rem; z-index: 2;
    width: 1.35rem; height: 1.35rem; border: 0; border-radius: 999px;
    background: rgba(15,23,42,0.72); color: #fff; font-size: 0.78rem; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s ease;
}
.pai-enh-pick-form:hover .pai-enh-version-del,
.pai-enh-pick-form:focus-within .pai-enh-version-del,
.pai-enh-pick-form:hover .pai-enh-version-edit,
.pai-enh-pick-form:focus-within .pai-enh-version-edit { opacity: 1; }
.pai-enh-version-del:hover { background: #b91c1c; }
.pai-enh-version-edit:hover { background: #1d4ed8; }
.pai-enh-edit-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.75rem;
    margin-top: 0.55rem;
}
.pai-enh-edit-row .btn { flex: 0 0 auto; }
.pai-enh-edit-row .pai-hint { flex: 1 1 12rem; font-size: 0.78rem; color: #64748b; }
.pai-life-hist-card .pai-media-actions {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.pai-life-hist-card .pai-media-actions .btn { flex: 1 1 auto; min-width: 5.5rem; }
.pai-ai-edit {
    position: fixed; inset: 0; z-index: 12050;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.pai-ai-edit[hidden] { display: none !important; }
.pai-ai-edit-backdrop {
    position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.pai-ai-edit-dialog {
    position: relative; z-index: 1; width: min(34rem, 100%);
    background: #fff; border-radius: 14px; border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}
.pai-ai-edit-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    padding: 1rem 1.15rem 0.85rem;
    border-bottom: 1px solid #eef2f7;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.pai-ai-edit-kicker {
    margin: 0 0 0.2rem; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: #64748b;
}
.pai-ai-edit-head h3 {
    margin: 0; font-size: 1.1rem; font-weight: 700; color: #0f172a; letter-spacing: -0.01em;
}
.pai-ai-edit-x {
    width: 2rem; height: 2rem; border: 0; border-radius: 8px;
    background: transparent; color: #64748b; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.pai-ai-edit-x:hover { background: #f1f5f9; color: #0f172a; }
.pai-ai-edit-body { padding: 1rem 1.15rem 1.15rem; }
.pai-ai-edit-preview {
    border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0;
    background: #f8fafc; aspect-ratio: 4 / 3; margin-bottom: 0.85rem;
}
.pai-ai-edit-preview img {
    width: 100%; height: 100%; object-fit: contain; display: block; background: #fff;
}
.pai-ai-edit-hint { margin: 0 0 0.85rem; }
.pai-ai-edit-form .pai-label {
    display: block; font-size: 0.8rem; font-weight: 650; color: #334155; margin: 0 0 0.35rem;
}
.pai-ai-edit-form .pai-textarea,
.pai-ai-edit-form .pai-select { width: 100%; margin-bottom: 0.85rem; }
.pai-ai-edit-actions {
    display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem;
}
.pai-hidden-form { display: none; }

/* Same as photo enhance: white letterbox (not cinema black) while Omni aspect ≠ 1.25:1 */
.pai-enh-frame--video {
    background: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pai-enh-frame--video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
}
.pai-enh-version-frame--video {
    background: #fff;
    position: relative;
    overflow: hidden;
}
.pai-enh-version-frame--video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    pointer-events: none;
    background: #fff;
}
.pai-enh-video-thumb-play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: rgba(15, 23, 42, 0.42);
    pointer-events: none;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
}
.pai-veh-banner {
    margin: 0 0 0.9rem;
    padding: 0.75rem 0.95rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
}
.pai-veh-banner.is-success {
    border-color: #86efac;
    background: #ecfdf5;
    color: #14532d;
}
.pai-veh-banner.is-warning {
    border-color: #fcd34d;
    background: #fffbeb;
    color: #92400e;
}
.pai-veh-banner.is-error {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}
.pai-veh-banner.is-progress {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1e3a8a;
}
.pai-veh-banner[hidden] { display: none !important; }
.pai-enh-pair.is-busy { opacity: 0.65; pointer-events: none; }
.pai-enh-pair.is-enhancing {
    border-color: #7c3aed;
    background: linear-gradient(90deg, #f5f3ff 0%, #fff 60%);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}
.pai-enh-pair.is-enh-queued {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.pai-enh-busy-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.22rem 0.6rem; border-radius: 999px;
    background: #ede9fe; border: 1px solid #ddd6fe; color: #5b21b6;
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
.pai-enh-busy-chip.is-waiting {
    background: #f1f5f9; border-color: #cbd5e1; color: #475569;
}
.pai-enh-busy-chip i {
    width: 0.85rem; height: 0.85rem; border-radius: 999px;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: paiEnhSpin 0.7s linear infinite;
}
.pai-enh-busy-chip.is-waiting i { animation-duration: 1.6s; opacity: 0.6; }
@keyframes paiEnhSpin { to { transform: rotate(360deg); } }
.pai-enh-pair--flash {
    outline: 2px solid #7c3aed;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.12);
    transition: outline-color 0.3s ease, box-shadow 0.3s ease;
}
.pai-enh-toast {
    color: #5b21b6 !important; background: #f5f3ff; border: 1px solid #ddd6fe;
    border-radius: 8px; padding: 0.45rem 0.7rem; margin-bottom: 0.75rem !important;
}
.pai-life-toast {
    color: #1d4ed8 !important; background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 8px; padding: 0.45rem 0.7rem; margin-bottom: 0.75rem !important;
}
.pai-life-hist-card.is-busy { opacity: 0.65; pointer-events: none; }
.pai-wiz-callout {
    background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
    border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 1rem; font-size: 0.9rem;
}
.pai-wiz-callout a { color: #2563eb; font-weight: 600; }
.pai-mf-plan {
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 60%);
}
.pai-mf-plan-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}
.pai-mf-plan-copy { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.pai-mf-plan-head strong { font-size: 1rem; color: #0f172a; }
.pai-mf-reread-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
}
.pai-mf-reread-btn:hover { background: #f8fafc; border-color: #94a3b8; }
.pai-mf-reread-btn:disabled { opacity: 0.55; cursor: wait; }
.pai-mf-reread-hint {
    margin: 0 0 0.85rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #64748b;
}
.pai-mf-plan--empty { padding-bottom: 0.25rem; }
.pai-mf-section { margin-top: 0.75rem; }
.pai-mf-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.pai-mf-section--needs .pai-mf-section-label { color: #b45309; }
.pai-mf-count {
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7rem;
}
.pai-mf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.55rem 0.75rem;
}
.pai-mf-row label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.25rem;
}
.pai-mf-row.is-filled .pai-mf-value {
    font-size: 0.9rem;
    color: #0f172a;
    padding: 0.45rem 0.6rem;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}
.pai-mf-row.is-filled.is-editable {
    padding: 0.55rem 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}
.pai-mf-row.is-filled.is-editable .pai-mf-badge {
    margin-left: 0.15rem;
}
.pai-mf-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0369a1;
    background: #e0f2fe;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    flex-shrink: 0;
}
.pai-mf-badge.is-manual { color: #6d28d9; background: #ede9fe; }
.pai-mf-row.is-needs {
    padding: 0.55rem 0.65rem;
    border: 1px dashed #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
}
.pai-mf-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: #92400e;
}
.pai-mf-guide-hint {
    font-weight: 500;
    font-size: 0.68rem;
    color: #64748b;
    text-transform: none;
    letter-spacing: 0;
}
.pai-wiz-success {
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; padding: 1rem 1.15rem;
}
.pai-wiz-success code { font-size: 0.85rem; color: #065f46; }

.pai-linked-row {
    display: flex; flex-wrap: wrap; gap: 0.45rem 0.75rem; align-items: center;
    margin: 0 0 1rem; padding: 0.65rem 0.85rem;
    border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc;
    font-size: 0.84rem; color: #475569;
}
.pai-linked-row-label {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b;
}
.pai-linked-row code { font-size: 0.78rem; color: #334155; word-break: break-all; }
.pai-linked-row-meta { color: #94a3b8; }
.pai-linked-row-link { margin-left: auto; color: #2563eb; font-weight: 600; text-decoration: none; }
.pai-linked-row-link:hover { text-decoration: underline; }

.pai-media-grid--lux { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }

/* Shopify-style media gallery */
.pai-shop-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: stretch;
}
@media (max-width: 900px) {
    .pai-shop-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .pai-shop-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pai-shop-tile {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    min-height: 0;
    aspect-ratio: 1;
    cursor: grab;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.pai-shop-tile:active { cursor: grabbing; }
/* Featured is badge-only — equal tiles so drag hit-targets stay predictable. */
.pai-shop-tile--featured {
    border-color: #111827;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.12);
}
.pai-shop-tile.is-dragging {
    opacity: 0.35;
    border-style: dashed;
    background: #f3f4f6;
}
.pai-shop-tile.is-drag-over {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}
.pai-shop-order {
    position: absolute; left: 0.4rem; bottom: 0.4rem; z-index: 3;
    min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; color: #fff; background: #111827;
    border-radius: 6px; pointer-events: none;
}
.pai-shop-tile--featured .pai-shop-order { background: #2563eb; }
.pai-shop-drag-hint {
    position: absolute; left: 0.4rem; top: 0.4rem; z-index: 3;
    width: 1.35rem; height: 1.35rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; line-height: 1; color: #334155; background: rgba(255,255,255,0.92);
    border: 1px solid #e2e8f0; border-radius: 6px; pointer-events: none;
}
.pai-shop-tile--featured .pai-shop-drag-hint { top: 0.4rem; left: 0.4rem; }
.pai-shop-tile-media {
    position: absolute; inset: 0;
    background: #fff; cursor: grab;
}
.pai-shop-tile-media img,
.pai-shop-tile-media video {
    display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; pointer-events: none;
}
.pai-shop-featured-badge {
    position: absolute; left: 0.55rem; top: 0.55rem; z-index: 2;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff; background: #111827; border-radius: 6px; padding: 0.2rem 0.45rem;
}
.pai-shop-tile--featured .pai-shop-featured-badge { left: 2.05rem; }
.pai-shop-video-badge {
    position: absolute; right: 0.55rem; top: 0.55rem; z-index: 2;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
    color: #fff; background: #0f766e; border-radius: 6px; padding: 0.15rem 0.45rem;
}
.pai-shop-tile--video .pai-shop-featured-badge + .pai-shop-video-badge,
.pai-shop-tile--video .pai-shop-featured-badge ~ .pai-shop-video-badge {
    top: 2.15rem; /* sit under Featured when both show */
}
.pai-shop-play {
    position: absolute; left: 50%; top: 50%; z-index: 2;
    transform: translate(-50%, -50%);
    width: 2.6rem; height: 2.6rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
    pointer-events: none;
}
.pai-shop-play svg { display: block; margin-left: 2px; }
.pai-shop-tile--video .pai-shop-tile-media::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.28), transparent 45%);
    pointer-events: none;
}
.pai-shop-mini-chip {
    position: absolute; right: 0.55rem; top: 0.55rem; z-index: 2;
    font-size: 0.65rem; font-weight: 700; color: #fff; background: #7c3aed;
    border-radius: 6px; padding: 0.15rem 0.4rem;
}
.pai-shop-tile--video .pai-shop-mini-chip { top: auto; bottom: 0.55rem; }
.pai-shop-tile-actions {
    position: absolute; right: 0.35rem; bottom: 0.35rem; z-index: 3;
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem;
    max-width: calc(100% - 2.2rem);
    opacity: 1;
}
.pai-shop-action {
    width: 1.7rem; height: 1.7rem; border: 0; border-radius: 8px;
    background: rgba(15,23,42,0.78); color: #fff; font-size: 0.85rem;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.pai-shop-action.is-on { background: #2563eb; }
.pai-shop-action--danger:hover { background: #b91c1c; }
.pai-shop-tile--add {
    display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed #d1d5db; background: #f9fafb; cursor: pointer;
    text-decoration: none; color: #9ca3af; aspect-ratio: 1;
}
.pai-shop-tile--add span { font-size: 1.75rem; font-weight: 300; line-height: 1; }
.pai-shop-tile--add:hover { border-color: #9ca3af; color: #4b5563; background: #f3f4f6; }
.pai-gallery-toast {
    color: #1d4ed8 !important; background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: 8px; padding: 0.35rem 0.65rem; margin: 0 !important; font-size: 0.8rem;
}
.pai-shop-ghost {
    position: fixed; pointer-events: none; z-index: 3000;
    width: 96px; height: 96px; border-radius: 10px; overflow: hidden;
    border: 1px solid #e5e7eb; background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,0.22);
    opacity: 0.95;
}
.pai-shop-ghost img, .pai-shop-ghost video {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.pai-media-card--lux {
    border-radius: 12px; border-color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pai-media-open {
    display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in;
    position: relative; overflow: hidden;
}
.pai-media-open img, .pai-media-open video {
    display: block; width: 100%; aspect-ratio: 1.25; object-fit: contain; background: #fff;
    transition: transform 0.25s ease, opacity 0.2s;
}
.pai-media-open:hover img, .pai-media-open:hover video { transform: scale(1.03); opacity: 0.92; }
.pai-media-zoom {
    position: absolute; left: 0.5rem; bottom: 0.5rem;
    background: rgba(15,23,42,0.82); color: #fff; font-size: 0.68rem; font-weight: 600;
    padding: 0.2rem 0.45rem; border-radius: 6px; letter-spacing: 0.02em;
    opacity: 0; transition: opacity 0.15s;
}
.pai-media-open:hover .pai-media-zoom { opacity: 1; }

.pai-wiz-footer {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 1.25rem; padding: 1rem 0.15rem 0.25rem;
}
.pai-wiz-footer-left, .pai-wiz-footer-right { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pai-wiz-cancel { opacity: 0.85; }

.pai-collection-results {
    margin-top: 0.4rem; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; max-height: 220px; overflow: auto;
}
.pai-collection-results button {
    display: block; width: 100%; text-align: left; padding: 0.5rem 0.65rem; border: 0; border-bottom: 1px solid #f3f4f6;
    background: transparent; cursor: pointer; font-size: 0.9rem;
}
.pai-collection-results button:hover { background: #eff6ff; }
.pai-select { appearance: auto; max-width: 100%; }

/* Guide from existing product */
.pai-guide {
    margin: 0 0 1.25rem; border: 1px solid #e5e7eb; border-radius: 12px; background: linear-gradient(180deg, #fafbfc 0%, #fff 40%);
    overflow: hidden;
}
.pai-guide-toggle {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 0.95rem 1.1rem; border-bottom: 1px solid transparent;
}
.pai-guide[data-open="1"] .pai-guide-toggle { border-bottom-color: #e5e7eb; }
.pai-guide-switch { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; margin: 0; }
.pai-guide-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pai-guide-switch-ui {
    flex: 0 0 auto; width: 2.4rem; height: 1.35rem; border-radius: 999px; background: #d1d5db; position: relative;
    transition: background .15s ease; margin-top: 0.15rem;
}
.pai-guide-switch-ui::after {
    content: ''; position: absolute; top: 0.15rem; left: 0.15rem; width: 1.05rem; height: 1.05rem;
    border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease;
}
.pai-guide-switch input:checked + .pai-guide-switch-ui { background: #111827; }
.pai-guide-switch input:checked + .pai-guide-switch-ui::after { transform: translateX(1.05rem); }
.pai-guide-switch-text { display: flex; flex-direction: column; gap: 0.15rem; }
.pai-guide-switch-text strong { font-size: 0.95rem; color: #111827; }
.pai-guide-switch-text span { font-size: 0.82rem; color: #6b7280; line-height: 1.35; }
.pai-guide-active-pill {
    align-self: center; font-size: 0.75rem; font-weight: 600; color: #065f46; background: #ecfdf5;
    border: 1px solid #a7f3d0; border-radius: 999px; padding: 0.25rem 0.65rem; max-width: 280px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pai-guide-body { padding: 1rem 1.1rem 1.15rem; }
.pai-guide-ai {
    margin-bottom: 1rem; padding: 0.9rem 1rem; border-radius: 10px;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.pai-guide-ai-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.pai-guide-ai-status {
    font-size: 0.85rem; color: #64748b; margin-bottom: 0.65rem; line-height: 1.4;
}
.pai-guide-ai-status.is-error { color: #b91c1c; }
.pai-guide-ai-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;
}
@media (max-width: 900px) { .pai-guide-ai-grid { grid-template-columns: 1fr; } }
.pai-guide-ai-card {
    display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 12px;
    background: #fff; overflow: hidden; min-height: 100%;
    transition: border-color .12s, box-shadow .12s;
}
.pai-guide-ai-card:hover { border-color: #94a3b8; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); }
.pai-guide-ai-card.is-used { border-color: #111827; box-shadow: 0 0 0 1px #111827; }
.pai-guide-ai-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.45rem; height: 1.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
    background: #111827; color: #fff; flex: 0 0 auto;
}
.pai-guide-ai-media {
    position: relative; background: #f1f5f9;
}
.pai-guide-ai-media img, .pai-guide-ai-media .pai-guide-card-ph {
    display: block; width: 100%; aspect-ratio: 1.15; object-fit: cover;
}
.pai-guide-ai-body { padding: 0.7rem 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.pai-guide-ai-title-row { display: flex; align-items: flex-start; gap: 0.45rem; }
.pai-guide-ai-title {
    font-size: 0.88rem; font-weight: 650; color: #0f172a; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pai-guide-ai-meta {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.pai-guide-ai-tag {
    font-size: 0.68rem; font-weight: 600; color: #475569; background: #f1f5f9;
    border-radius: 999px; padding: 0.15rem 0.45rem;
}
.pai-guide-ai-reason {
    font-size: 0.78rem; color: #64748b; line-height: 1.4; flex: 1;
}
.pai-guide-ai-actions { margin-top: 0.25rem; }
.pai-guide-ai-actions .btn { width: 100%; font-size: 0.82rem; }
.pai-guide-ai-skeleton {
    border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; min-height: 220px;
}
.pai-guide-ai-skeleton .sk-img {
    height: 140px; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%; animation: pai-guide-shimmer 1.1s infinite;
}
.pai-guide-ai-skeleton .sk-line {
    height: 0.65rem; margin: 0.55rem 0.75rem; border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%; animation: pai-guide-shimmer 1.1s infinite;
}
.pai-guide-ai-skeleton .sk-line.short { width: 55%; }
@keyframes pai-guide-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.pai-guide-manual {
    margin: 0 0 1rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
}
.pai-guide-manual > summary {
    cursor: pointer; user-select: none; padding: 0.7rem 0.9rem; font-size: 0.88rem; font-weight: 600; color: #475569;
    list-style: none;
}
.pai-guide-manual > summary::-webkit-details-marker { display: none; }
.pai-guide-manual > summary::after { content: '▾'; float: right; color: #94a3b8; }
.pai-guide-manual[open] > summary::after { content: '▴'; }
.pai-guide-manual-body { padding: 0 0.9rem 0.9rem; }
.pai-guide-filters { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 800px) { .pai-guide-filters { grid-template-columns: 1fr; } }
.pai-guide-filter-label {
    display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: #6b7280; margin-bottom: 0.45rem;
}
.pai-guide-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pai-guide-chip {
    border: 1px solid #e5e7eb; background: #fff; color: #374151; border-radius: 999px;
    padding: 0.35rem 0.7rem; font-size: 0.82rem; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.pai-guide-chip:hover { border-color: #9ca3af; }
.pai-guide-chip.is-active { background: #111827; border-color: #111827; color: #fff; }
.pai-guide-coll-wrap { position: relative; }
.pai-guide-coll-selected {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem;
    padding: 0.4rem 0.55rem; background: #f3f4f6; border-radius: 6px; font-size: 0.88rem;
}
.pai-guide-coll-clear {
    margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: #6b7280; line-height: 1;
}
.pai-guide-products-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.55rem; }
.pai-guide-products {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; min-height: 4rem;
}
@media (max-width: 1000px) { .pai-guide-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pai-guide-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pai-guide-card {
    border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; cursor: pointer;
    text-align: left; padding: 0; transition: border-color .12s, box-shadow .12s;
}
.pai-guide-card:hover { border-color: #9ca3af; }
.pai-guide-card.is-selected { border-color: #111827; box-shadow: 0 0 0 1px #111827; }
.pai-guide-card img, .pai-guide-card .pai-guide-card-ph {
    display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f3f4f6;
}
.pai-guide-card-ph { display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 0.75rem; }
.pai-guide-card-body { padding: 0.45rem 0.5rem 0.55rem; }
.pai-guide-card-title {
    font-size: 0.78rem; font-weight: 600; color: #111827; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2rem;
}
.pai-guide-card-meta { font-size: 0.68rem; color: #6b7280; margin-top: 0.2rem; text-transform: capitalize; }
.pai-guide-empty {
    grid-column: 1 / -1; padding: 1.5rem 1rem; text-align: center; color: #6b7280; font-size: 0.9rem;
    border: 1px dashed #e5e7eb; border-radius: 10px; background: #fafafa;
}
.pai-guide-pager {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.75rem;
}
.pai-guide-pick {
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;
    display: grid; gap: 0.85rem;
}
.pai-guide-pick-card {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem;
    background: #111827; color: #fff; border-radius: 10px;
}
.pai-guide-pick-card img {
    width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #374151; flex: 0 0 auto;
}
.pai-guide-pick-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pai-guide-pick-meta strong { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pai-guide-pick-meta .pai-hint { color: #cbd5e1 !important; }
.pai-guide-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1rem; }
.pai-guide-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: #374151; cursor: pointer; margin: 0; }
.pai-guide-coll-list {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.pai-guide-coll-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem;
    border: 1px solid #e5e7eb; border-radius: 999px; padding: 0.25rem 0.55rem; background: #fff; cursor: pointer;
}
.pai-guide-coll-chip input { margin: 0; }
.pai-guide-apply-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.pai-guide-extra {
    display: grid; gap: 0.55rem; padding: 0.65rem 0.75rem; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0;
}
.pai-guide-extra-block strong {
    display: block; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; margin-bottom: 0.3rem;
}
.pai-guide-extra-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pai-guide-extra-chip {
    font-size: 0.72rem; font-weight: 600; color: #334155; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 999px; padding: 0.15rem 0.5rem;
}
.pai-guide-extra-meta {
    font-size: 0.78rem; color: #475569; line-height: 1.35;
}

/* Lightbox */
.pai-lb { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pai-lb[hidden] { display: none !important; }
.pai-lb-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.82); backdrop-filter: blur(4px); }
.pai-lb-dialog {
    position: relative; z-index: 1; width: min(960px, 100%); max-height: calc(100vh - 2rem);
    background: #0f172a; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 25px 60px rgba(0,0,0,0.45); display: flex; flex-direction: column; overflow: hidden;
}
.pai-lb-close {
    position: absolute; top: 0.55rem; right: 0.65rem; z-index: 2;
    width: 2.1rem; height: 2.1rem; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,0.12); color: #fff; font-size: 1.4rem; line-height: 1;
}
.pai-lb-close:hover { background: rgba(255,255,255,0.22); }
.pai-lb-title {
    padding: 0.85rem 3rem 0.55rem 1rem; color: #e2e8f0; font-size: 0.85rem; font-weight: 600;
}
.pai-lb-body {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 1rem; overflow: auto;
}
.pai-lb-body img, .pai-lb-body video {
    max-width: 100%; max-height: calc(100vh - 10rem); object-fit: contain; border-radius: 6px;
}
.pai-lb-actions {
    display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.85rem 1rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.pai-lb-actions .btn { font-size: 0.8rem; }

@media (max-width: 700px) {
    .pai-wiz-step-text small { display: none; }
    .pai-wiz-panel { padding: 1.1rem; }
}
</style>
@endpush

@push('scripts')
@include('product_ai_import.partials.upload-preview-script')
<script>
(function () {
    /* After Shopify bg sync finishes, show a clear result (pending banner should be gone). */
    (function showShopifySyncFlash() {
        try {
            var raw = sessionStorage.getItem('pai_shopify_sync_flash');
            if (!raw) return;
            sessionStorage.removeItem('pai_shopify_sync_flash');
            var parts = raw.split('|');
            var msg = parts[0] || 'Shopify sync finished.';
            var st = parts[1] || 'done';
            var el = document.createElement('div');
            el.className = 'alert ' + (st === 'failed' ? 'alert-error' : 'alert-success');
            el.setAttribute('role', 'status');
            el.style.cssText = 'margin:0 0 1rem;font-weight:600;';
            el.textContent = msg;
            var sticky = document.getElementById('pai-wiz-sticky');
            if (sticky && sticky.parentNode) {
                sticky.parentNode.insertBefore(el, sticky);
            } else {
                document.body.insertBefore(el, document.body.firstChild);
            }
            try { el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } catch (e) {}
        } catch (err) {}
    })();

    /* Pin Shopify banner + step nav under site header (fixed — sticky is broken by body overflow-x) */
    (function initWizardStickyChrome() {
        var sticky = document.getElementById('pai-wiz-sticky');
        if (!sticky || !sticky.parentNode) return;

        document.body.classList.add('pai-wiz-page');

        var header = document.querySelector('.header');
        var placeholder = document.getElementById('pai-wiz-sticky-ph');
        if (!placeholder) {
            placeholder = document.createElement('div');
            placeholder.id = 'pai-wiz-sticky-ph';
            placeholder.setAttribute('aria-hidden', 'true');
            sticky.parentNode.insertBefore(placeholder, sticky);
        }

        var container = sticky.closest('.container') || sticky.parentElement;
        var stuck = false;
        var anchorY = 0;
        // In-flow height at the moment we pin — keep placeholder ≥ this so compact
        // stuck bars don't yank section titles (e.g. Photos) up underneath the chrome.
        var flowHeightWhenPinned = 0;

        // Placeholder always stays in flow (height 0 when static) so its document position
        // is a stable reference. Toggling display:none moved it and trapped the scroll.
        placeholder.style.display = 'block';
        placeholder.style.height = '0px';

        function scrollY() {
            return window.pageYOffset || document.documentElement.scrollTop || 0;
        }

        function headerH() {
            return header ? Math.ceil(header.getBoundingClientRect().height) : 0;
        }

        function measureAnchor() {
            if (stuck) return;
            anchorY = placeholder.getBoundingClientRect().top + scrollY();
        }

        function setPlaceholderHeight(nextH) {
            nextH = Math.max(0, Math.round(nextH || 0));
            var prevH = Math.round(parseFloat(placeholder.style.height) || 0);
            if (prevH === nextH) return;
            placeholder.style.height = nextH + 'px';
            // Never scrollBy here — while a job is running it yanked the page
            // back to the Working banner and blocked reading the wizard.
        }

        function syncStickyOffsetVar() {
            var h = stuck ? (headerH() + Math.round(sticky.offsetHeight || 0)) : headerH();
            document.documentElement.style.setProperty('--pai-sticky-offset', Math.max(0, h) + 'px');
        }

        function placeholderTargetHeight() {
            var visual = Math.round(sticky.offsetHeight || 0);
            return Math.max(visual, flowHeightWhenPinned || 0);
        }

        function syncGeometry() {
            var cRect = container.getBoundingClientRect();
            sticky.style.top = headerH() + 'px';
            sticky.style.left = Math.max(0, cRect.left) + 'px';
            sticky.style.width = Math.max(200, cRect.width) + 'px';
            sticky.style.zIndex = '90';
            setPlaceholderHeight(placeholderTargetHeight());
            syncStickyOffsetVar();
        }

        function applyFixed() {
            if (!stuck) {
                // Measure full in-flow chrome BEFORE compact .is-stuck styles apply.
                flowHeightWhenPinned = Math.round(sticky.offsetHeight || 0);
                stuck = true;
                sticky.classList.add('is-stuck');
            }
            syncGeometry();
        }

        function applyStatic() {
            if (!stuck) return;
            stuck = false;
            flowHeightWhenPinned = 0;
            sticky.classList.remove('is-stuck');
            sticky.style.top = '';
            sticky.style.left = '';
            sticky.style.width = '';
            sticky.style.zIndex = '';
            placeholder.style.height = '0px';
            syncStickyOffsetVar();
            measureAnchor();
        }

        function update() {
            var threshold = anchorY - headerH();
            var y = scrollY();
            // 8px hysteresis: comparing live rects flipped state on every scroll event, which
            // snapped the page back to the same spot and made the step impossible to scroll.
            if (!stuck && y > threshold + 8) {
                applyFixed();
            } else if (stuck && y < threshold - 8) {
                applyStatic();
            } else if (stuck) {
                syncGeometry();
            }
        }

        window.addEventListener('scroll', update, { passive: true });
        window.addEventListener('resize', function () {
            measureAnchor();
            update();
        });
        if (window.ResizeObserver) {
            if (header) new ResizeObserver(update).observe(header);
            var stickyResizeTimer = null;
            new ResizeObserver(function () {
                // Debounce: bg-job poll rewrites queue HTML every ~2.5s and used to yank scroll.
                if (stickyResizeTimer) clearTimeout(stickyResizeTimer);
                stickyResizeTimer = setTimeout(function () {
                    if (stuck) {
                        setPlaceholderHeight(placeholderTargetHeight());
                        syncStickyOffsetVar();
                    } else {
                        measureAnchor();
                    }
                }, 50);
            }).observe(sticky);
        }
        measureAnchor();
        update();
    })();

    /* Rich description editor (preview as storefront, save as HTML) */
    (function initDescriptionRte() {
        var root = document.querySelector('[data-pai-rte]');
        if (!root) return;
        var surface = root.querySelector('.pai-rte-surface');
        var source = root.querySelector('.pai-rte-source');
        var form = root.closest('form');
        if (!surface || !source) return;

        surface.setAttribute('data-placeholder', 'Product description will appear here as customers see it…');
        function syncEmpty() {
            var empty = (surface.textContent || '').trim() === '';
            surface.classList.toggle('is-empty', empty);
        }
        function surfaceToSource() {
            source.value = surface.innerHTML.trim();
        }
        function sourceToSurface() {
            surface.innerHTML = source.value || '';
            syncEmpty();
        }
        syncEmpty();
        // Keep the hidden field in sync with the rendered editor (avoid escaped &lt;p&gt; on save).
        surfaceToSource();

        root.querySelectorAll('[data-pai-rte-cmd]').forEach(function (btn) {
            btn.addEventListener('click', function (e) {
                e.preventDefault();
                if (root.classList.contains('is-source')) return;
                surface.focus();
                document.execCommand(btn.getAttribute('data-pai-rte-cmd'), false, null);
                surfaceToSource();
                syncEmpty();
                source.dispatchEvent(new Event('input', { bubbles: true }));
            });
        });

        var toggleBtn = root.querySelector('[data-pai-rte-toggle-source]');
        if (toggleBtn) {
            toggleBtn.addEventListener('click', function (e) {
                e.preventDefault();
                if (root.classList.contains('is-source')) {
                    sourceToSurface();
                    root.classList.remove('is-source');
                    source.hidden = true;
                    toggleBtn.classList.remove('is-active');
                    toggleBtn.textContent = 'HTML';
                    surface.focus();
                    source.dispatchEvent(new Event('input', { bubbles: true }));
                } else {
                    surfaceToSource();
                    root.classList.add('is-source');
                    source.hidden = false;
                    toggleBtn.classList.add('is-active');
                    toggleBtn.textContent = 'Preview';
                    source.focus();
                }
            });
        }

        surface.addEventListener('input', function () {
            surfaceToSource();
            syncEmpty();
            source.dispatchEvent(new Event('input', { bubbles: true }));
        });
        surface.addEventListener('paste', function (e) {
            e.preventDefault();
            var text = (e.clipboardData || window.clipboardData).getData('text/plain');
            document.execCommand('insertText', false, text);
            surfaceToSource();
            syncEmpty();
            source.dispatchEvent(new Event('input', { bubbles: true }));
        });
        if (form) {
            form.addEventListener('submit', function () {
                if (root.classList.contains('is-source')) {
                    sourceToSurface();
                }
                surfaceToSource();
            });
        }

        // Expose sync so autosave can flush HTML before posting.
        root._paiRteFlush = function () {
            if (root.classList.contains('is-source')) {
                sourceToSurface();
            }
            surfaceToSource();
        };
    })();

    /* Listing fields auto-save (no Save button) */
    (function initListingAutosave() {
        var form = document.getElementById('pai-listing-form');
        if (!form || form.getAttribute('data-autosave') !== '1') return;
        var status = document.getElementById('pai-listing-autosave');
        var timer = null;
        var inflight = null;
        var dirty = false;

        function setStatus(text, cls) {
            if (!status) return;
            status.textContent = text;
            status.classList.remove('is-saving', 'is-saved', 'is-error');
            if (cls) status.classList.add(cls);
        }

        function flushRte() {
            var rte = form.querySelector('[data-pai-rte]');
            if (rte && typeof rte._paiRteFlush === 'function') {
                rte._paiRteFlush();
            }
        }

        function saveNow() {
            flushRte();
            dirty = false;
            setStatus('Saving…', 'is-saving');
            var fd = new FormData(form);
            // Ensure product_details from the associated notes textarea is included.
            var detailsNotes = document.getElementById('product_details');
            if (detailsNotes && detailsNotes.name === 'product_details') {
                fd.set('product_details', detailsNotes.value || '');
            }
            if (inflight && typeof inflight.abort === 'function') {
                try { inflight.abort(); } catch (e) {}
            }
            var controller = (typeof AbortController !== 'undefined') ? new AbortController() : null;
            inflight = controller;
            fetch(form.action, {
                method: 'POST',
                body: fd,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                signal: controller ? controller.signal : undefined,
                credentials: 'same-origin'
            }).then(function (res) {
                if (!res.ok) throw new Error('save failed');
                return res.json().catch(function () { return { ok: true }; });
            }).then(function () {
                setStatus('Saved', 'is-saved');
                clearTimeout(setStatus._t);
                setStatus._t = setTimeout(function () {
                    setStatus('Saves automatically', null);
                }, 1800);
            }).catch(function (err) {
                if (err && err.name === 'AbortError') return;
                setStatus('Couldn’t save — try again', 'is-error');
                dirty = true;
            }).finally(function () {
                if (inflight === controller) inflight = null;
            });
        }

        function scheduleSave() {
            dirty = true;
            setStatus('Editing…', null);
            clearTimeout(timer);
            timer = setTimeout(saveNow, 700);
        }

        form.addEventListener('input', function (e) {
            if (!e.target || e.target.closest('.pai-rte-toolbar')) return;
            scheduleSave();
        });
        form.addEventListener('change', scheduleSave);
        // Notes live outside the form (form= association) — listen directly so they autosave too.
        var detailsNotes = document.getElementById('product_details');
        if (detailsNotes) {
            detailsNotes.addEventListener('input', scheduleSave);
            detailsNotes.addEventListener('change', scheduleSave);
        }
        form.addEventListener('blur', function (e) {
            if (!e.target || (!form.contains(e.target) && e.target !== detailsNotes)) return;
            if (dirty) {
                clearTimeout(timer);
                saveNow();
            }
        }, true);

        // Flush pending edits before leaving the step.
        document.querySelectorAll('.pai-wiz-footer a, .pai-wiz-steps a').forEach(function (link) {
            link.addEventListener('click', function () {
                if (!dirty) return;
                clearTimeout(timer);
                saveNow();
            });
        });
        window.addEventListener('beforeunload', function () {
            if (!dirty) return;
            flushRte();
            try {
                var fd = new FormData(form);
                if (navigator.sendBeacon) {
                    navigator.sendBeacon(form.action, fd);
                }
            } catch (e) {}
        });
    })();

    /* Metafields (Needs you / Filled editable) — autosave without Shopify submit */
    (function initMetafieldAutosave() {
        var plan = document.getElementById('pai-mf-plan');
        if (!plan) return;
        var status = document.getElementById('pai-mf-autosave');
        var fieldsUrl = @json(route('product-ai-import.update-fields', $import));
        var timer = null;
        var inflight = null;
        var dirty = false;

        function csrfToken() {
            var meta = document.querySelector('meta[name="csrf-token"]');
            if (meta && meta.getAttribute('content')) return meta.getAttribute('content');
            var field = document.querySelector('#pai-shopify-form input[name="_token"], #pai-listing-form input[name="_token"]');
            return field ? field.value : '';
        }

        /* Re-read Product notes → refill Diamond / Weight / Length / etc. */
        var rereadBtn = document.getElementById('pai-mf-reread');
        if (rereadBtn) {
            rereadBtn.addEventListener('click', function () {
                var url = plan.getAttribute('data-reparse-url') || '';
                if (!url || rereadBtn.disabled) return;
                if (!window.confirm('Re-read Product notes and refill metafields from them? Manual metafield edits will be replaced when notes have a value.')) {
                    return;
                }
                rereadBtn.disabled = true;
                var prevLabel = rereadBtn.textContent;
                rereadBtn.textContent = 'Reading…';
                setStatus('Re-reading notes…', 'is-saving');
                var body = new FormData();
                body.append('_token', csrfToken());
                var notes = document.getElementById('product_details');
                if (notes && notes.value) {
                    body.append('product_details', notes.value);
                }
                fetch(url, {
                    method: 'POST',
                    body: body,
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                })
                .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
                .then(function (res) {
                    if (!res.ok || !res.d || !res.d.ok) {
                        throw new Error((res.d && res.d.message) || 'Could not re-read notes');
                    }
                    setStatus(res.d.message || 'Updated', 'is-saved');
                    window.location.reload();
                })
                .catch(function (err) {
                    alert(err.message || 'Could not re-read notes.');
                    rereadBtn.disabled = false;
                    rereadBtn.textContent = prevLabel;
                    setStatus('Couldn’t re-read', 'is-error');
                });
            });
        }

        function setStatus(text, cls) {
            if (!status) return;
            status.textContent = text;
            status.classList.remove('is-saving', 'is-saved', 'is-error');
            if (cls) status.classList.add(cls);
        }

        function saveNow() {
            dirty = false;
            setStatus('Saving…', 'is-saving');
            var fd = new FormData();
            fd.append('_token', csrfToken());
            fd.append('_method', 'PUT');
            plan.querySelectorAll('[name^="metafield_manual["]').forEach(function (el) {
                if (!el.name) return;
                if (el.tagName === 'SELECT' || el.type === 'text' || el.tagName === 'TEXTAREA' || el.type === 'hidden') {
                    fd.append(el.name, el.value || '');
                }
            });
            if (inflight && typeof inflight.abort === 'function') {
                try { inflight.abort(); } catch (e) {}
            }
            var controller = (typeof AbortController !== 'undefined') ? new AbortController() : null;
            inflight = controller;
            fetch(fieldsUrl, {
                method: 'POST',
                body: fd,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                signal: controller ? controller.signal : undefined,
                credentials: 'same-origin'
            }).then(function (res) {
                if (!res.ok) throw new Error('save failed');
                return res.json().catch(function () { return { ok: true }; });
            }).then(function (data) {
                var pending = !!(data && data.shopify_pending);
                var changed = !!(data && data.changed);
                setStatus(pending || changed ? 'Saved · pending Shopify sync' : 'Saved', 'is-saved');
                if ((pending || changed) && typeof window.paiMarkShopifyPending === 'function') {
                    window.paiMarkShopifyPending('Metafields updated');
                }
                clearTimeout(setStatus._t);
                setStatus._t = setTimeout(function () {
                    setStatus('', null);
                }, 1800);
            }).catch(function (err) {
                if (err && err.name === 'AbortError') return;
                setStatus('Couldn’t save', 'is-error');
                dirty = true;
            }).finally(function () {
                if (inflight === controller) inflight = null;
            });
        }

        function scheduleSave() {
            dirty = true;
            setStatus('Editing…', null);
            clearTimeout(timer);
            timer = setTimeout(saveNow, 700);
        }

        plan.addEventListener('input', scheduleSave);
        plan.addEventListener('change', scheduleSave);
        plan.addEventListener('blur', function (e) {
            if (!e.target || !plan.contains(e.target)) return;
            if (dirty) {
                clearTimeout(timer);
                saveNow();
            }
        }, true);

        document.querySelectorAll('.pai-wiz-footer a, .pai-wiz-steps a').forEach(function (link) {
            link.addEventListener('click', function () {
                if (!dirty) return;
                clearTimeout(timer);
                saveNow();
            });
        });
    })();

    /* Title suggestion picker — apply one of 3 AI options */
    (function initTitlePick() {
        var wrap = document.getElementById('pai-title-pick');
        if (!wrap) return;
        var url = wrap.getAttribute('data-apply-url') || '';
        if (!url) return;
        var toast = document.getElementById('pai-title-pick-toast');
        var titleInput = document.getElementById('title');
        var seoInput = document.getElementById('seo_title');
        var csrf = document.querySelector('meta[name="csrf-token"]');
        var token = csrf ? csrf.getAttribute('content') : '';
        if (!token) {
            var csrfField = document.querySelector('#pai-listing-form input[name="_token"]');
            token = csrfField ? csrfField.value : '';
        }
        var busy = false;

        function showToast(msg) {
            if (!toast) return;
            toast.hidden = false;
            toast.textContent = msg;
            clearTimeout(showToast._t);
            showToast._t = setTimeout(function () { toast.hidden = true; }, 2200);
        }

        wrap.addEventListener('change', function (e) {
            var input = e.target;
            if (!input || !input.classList.contains('pai-title-card-input')) return;
            if (busy) return;
            busy = true;

            wrap.querySelectorAll('.pai-title-card').forEach(function (card) {
                card.classList.toggle('is-selected', card.contains(input));
            });

            var title = input.getAttribute('data-title') || '';
            if (titleInput && title) {
                titleInput.value = title;
                titleInput.dispatchEvent(new Event('input', { bubbles: true }));
            }

            var body = new FormData();
            body.append('_token', token);
            body.append('wizard_step', 'details');
            body.append('title_suggestion_id', input.value);

            fetch(url, {
                method: 'POST',
                body: body,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            }).then(function (res) {
                if (!res.ok) throw new Error('apply failed');
                return res.json();
            }).then(function (data) {
                if (titleInput && data.title) titleInput.value = data.title;
                if (seoInput && data.seo_title) {
                    seoInput.value = data.seo_title;
                    seoInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
                showToast('Title applied · SEO updated');
            }).catch(function () {
                showToast('Couldn’t apply title — try again');
            }).finally(function () {
                busy = false;
            });
        });
    })();

    /* SEO title / meta description character counters */
    document.querySelectorAll('[data-pai-seo-counter]').forEach(function (input) {
        var max = parseInt(input.getAttribute('data-pai-seo-max') || '0', 10);
        var countEl = input.parentElement && input.parentElement.querySelector('[data-pai-seo-count]');
        function sync() {
            var n = (input.value || '').length;
            if (countEl) countEl.textContent = String(n);
            if (max > 0 && n > max) {
                input.value = input.value.slice(0, max);
                if (countEl) countEl.textContent = String(max);
            }
        }
        input.addEventListener('input', sync);
        sync();
    });

    /* Shopify-style gallery drag & drop (auto-save) */
    var gallery = document.getElementById('pai-shop-gallery');
    var reorderForm = document.getElementById('pai-reorder-form');
    var galleryToast = document.getElementById('pai-gallery-toast');
    var csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

    function showGalleryToast(msg) {
        if (!galleryToast) return;
        galleryToast.hidden = false;
        galleryToast.textContent = msg;
        clearTimeout(showGalleryToast._t);
        showGalleryToast._t = setTimeout(function () { galleryToast.hidden = true; }, 2200);
    }

    function refreshFeaturedBadges() {
        if (!gallery) return;
        var tiles = gallery.querySelectorAll('.pai-shop-tile[data-id]');
        tiles.forEach(function (tile, idx) {
            tile.classList.toggle('pai-shop-tile--featured', idx === 0);
            var orderEl = tile.querySelector('.pai-shop-order');
            if (orderEl) orderEl.textContent = String(idx + 1);
            var badge = tile.querySelector('.pai-shop-featured-badge');
            if (idx === 0) {
                if (!badge) {
                    badge = document.createElement('span');
                    badge.className = 'pai-shop-featured-badge';
                    badge.textContent = 'Featured';
                    var media = tile.querySelector('.pai-shop-tile-media');
                    if (media) media.appendChild(badge);
                }
            } else if (badge) {
                badge.remove();
            }
        });
    }

    function moveGalleryTile(tile, delta) {
        if (!gallery || !tile) return;
        var tiles = Array.prototype.slice.call(gallery.querySelectorAll('.pai-shop-tile[data-id]'));
        var idx = tiles.indexOf(tile);
        if (idx < 0) return;
        var target = idx + delta;
        if (target < 0 || target >= tiles.length) return;
        if (delta < 0) {
            gallery.insertBefore(tile, tiles[target]);
        } else if (tiles[target].nextSibling) {
            gallery.insertBefore(tile, tiles[target].nextSibling);
        } else {
            gallery.appendChild(tile);
        }
        var add = gallery.querySelector('.pai-shop-tile--add');
        if (add) gallery.appendChild(add);
        refreshFeaturedBadges();
        persistGalleryOrder();
    }

    function syncOrderInputs() {
        if (!gallery || !reorderForm) return;
        // Rebuild order[] from current DOM tile order only (visible Shopify gallery).
        reorderForm.querySelectorAll('input[name="order[]"]').forEach(function (input) {
            input.remove();
        });
        gallery.querySelectorAll('.pai-shop-tile[data-id]').forEach(function (tile) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'order[]';
            input.value = tile.getAttribute('data-id');
            input.className = 'pai-shop-order-input';
            reorderForm.appendChild(input);
        });
    }

    function persistGalleryOrder() {
        if (!reorderForm || !gallery) return;
        // Keep "+" tile at the end so it never pollutes order.
        var add = gallery.querySelector('.pai-shop-tile--add');
        if (add) gallery.appendChild(add);
        syncOrderInputs();
        var url = reorderForm.getAttribute('data-reorder-url') || reorderForm.action;
        var fd = new FormData(reorderForm);
        gallery.classList.add('is-saving');
        fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': csrfToken
            },
            body: fd,
            credentials: 'same-origin'
        })
        .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, status: r.status, d: d }; }); })
        .then(function (res) {
            if (!res.ok || !res.d || !res.d.ok) {
                throw new Error((res.d && res.d.message) || 'Could not save order');
            }
            showGalleryToast(res.d.message || 'Gallery order saved.');
            if (res.d.shopify_pending && typeof window.paiMarkShopifyPending === 'function') {
                window.paiMarkShopifyPending(res.d.reason || 'Gallery order changed');
            }
        })
        .catch(function (err) {
            showGalleryToast(err.message || 'Could not save gallery order.');
            alert(err.message || 'Could not save gallery order. Refresh and try again.');
        })
        .finally(function () {
            gallery.classList.remove('is-saving');
        });
    }

    if (gallery && gallery.getAttribute('data-editable') === '1') {
        var dragTile = null;
        var ghost = null;
        var suppressClick = false;
        var lastInsertKey = '';

        gallery.addEventListener('click', function (e) {
            var moveBtn = e.target.closest('[data-pai-move]');
            if (moveBtn && gallery.contains(moveBtn)) {
                e.preventDefault();
                e.stopPropagation();
                var tile = moveBtn.closest('.pai-shop-tile[data-id]');
                var delta = parseInt(moveBtn.getAttribute('data-pai-move') || '0', 10);
                if (tile && delta) moveGalleryTile(tile, delta);
                return;
            }
            if (!suppressClick) return;
            e.preventDefault();
            e.stopPropagation();
        }, true);

        gallery.addEventListener('dragstart', function (e) {
            if (e.target.closest('button.pai-shop-action')) {
                e.preventDefault();
                return;
            }
            if (gallery.classList.contains('is-saving')) {
                e.preventDefault();
                return;
            }
            var tile = e.target.closest('.pai-shop-tile[data-id]');
            if (!tile) return;
            dragTile = tile;
            lastInsertKey = '';
            tile.classList.add('is-dragging');
            try {
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/plain', tile.getAttribute('data-id'));
            } catch (err) {}

            ghost = document.createElement('div');
            ghost.className = 'pai-shop-ghost';
            var cloneMedia = tile.querySelector('img, video');
            if (cloneMedia) {
                ghost.appendChild(cloneMedia.cloneNode(true));
            }
            document.body.appendChild(ghost);
            if (e.dataTransfer && e.dataTransfer.setDragImage) {
                e.dataTransfer.setDragImage(ghost, 48, 48);
            }
        });

        gallery.addEventListener('dragover', function (e) {
            if (!dragTile) return;
            e.preventDefault();
            var over = e.target.closest('.pai-shop-tile[data-id]');
            gallery.querySelectorAll('.pai-shop-tile.is-drag-over').forEach(function (t) {
                t.classList.remove('is-drag-over');
            });
            if (!over || over === dragTile) return;
            over.classList.add('is-drag-over');
            var rect = over.getBoundingClientRect();
            // Grid-friendly: left/top half = before, else after (equal square tiles).
            var before = (e.clientX - rect.left) + (e.clientY - rect.top) < (rect.width + rect.height) / 2;
            var key = over.getAttribute('data-id') + (before ? ':b' : ':a');
            if (key === lastInsertKey) return;
            lastInsertKey = key;
            if (before) {
                gallery.insertBefore(dragTile, over);
            } else if (over.nextSibling) {
                gallery.insertBefore(dragTile, over.nextSibling);
            } else {
                gallery.appendChild(dragTile);
            }
            var add = gallery.querySelector('.pai-shop-tile--add');
            if (add) gallery.appendChild(add);
            refreshFeaturedBadges();
        });

        gallery.addEventListener('dragend', function () {
            if (!dragTile) return;
            gallery.querySelectorAll('.pai-shop-tile.is-drag-over, .pai-shop-tile.is-dragging').forEach(function (t) {
                t.classList.remove('is-drag-over', 'is-dragging');
            });
            if (ghost && ghost.parentNode) ghost.parentNode.removeChild(ghost);
            ghost = null;
            dragTile = null;
            lastInsertKey = '';
            suppressClick = true;
            setTimeout(function () { suppressClick = false; }, 80);
            refreshFeaturedBadges();
            persistGalleryOrder();
        });
    }

    var typeToCategory = @json($typeToCategory ?? []);
    var typeToThemeTemplate = @json($typeToThemeTemplate ?? []);
    document.querySelectorAll('[data-pai-type-select]').forEach(function (typeSelect) {
        var form = typeSelect.closest('form');
        if (!form) return;
        var catSelect = form.querySelector('[data-pai-category-select]');
        var tplSelect = form.querySelector('[data-pai-template-select]');
        typeSelect.addEventListener('change', function () {
            var mapped = typeToCategory[typeSelect.value] || '';
            if (catSelect && mapped) {
                catSelect.value = mapped;
            }
            if (tplSelect && Object.prototype.hasOwnProperty.call(typeToThemeTemplate, typeSelect.value)) {
                tplSelect.value = typeToThemeTemplate[typeSelect.value];
            }
        });
    });

    (function initGuideFromProduct() {
        var root = document.getElementById('pai-guide');
        if (!root) return;

        var enable = document.getElementById('pai-guide-enable');
        var body = document.getElementById('pai-guide-body');
        var productsEl = document.getElementById('pai-guide-products');
        var hintEl = document.getElementById('pai-guide-products-hint');
        var pager = document.getElementById('pai-guide-pager');
        var prevBtn = document.getElementById('pai-guide-prev');
        var nextBtn = document.getElementById('pai-guide-next');
        var pageLabel = document.getElementById('pai-guide-page-label');
        var pickPanel = document.getElementById('pai-guide-pick');
        var toast = document.getElementById('pai-guide-toast');
        var activePill = document.getElementById('pai-guide-active-pill');
        var collSearch = document.getElementById('pai-guide-coll-search');
        var collId = document.getElementById('pai-guide-coll-id');
        var collResults = document.getElementById('pai-guide-coll-results');
        var collSelected = document.getElementById('pai-guide-coll-selected');
        var collSelectedTitle = document.getElementById('pai-guide-coll-selected-title');
        var csrf = document.querySelector('meta[name="csrf-token"]');
        var csrfToken = csrf ? csrf.getAttribute('content') : '';
        var aiGrid = document.getElementById('pai-guide-ai-grid');
        var aiStatus = document.getElementById('pai-guide-ai-status');
        var suggestBtn = document.getElementById('pai-guide-suggest-btn');

        var state = {
            categoryId: '',
            collectionId: '',
            page: 1,
            cursors: [null],
            hasNext: false,
            endCursor: null,
            selected: null,
            loading: false,
            suggesting: false,
            preferredCollectionId: null
        };

        function setOpen(on) {
            root.setAttribute('data-open', on ? '1' : '0');
            if (body) body.hidden = !on;
            if (enable) enable.checked = !!on;
        }

        function showToast(msg, isError) {
            if (!toast) return;
            toast.hidden = false;
            toast.textContent = msg;
            toast.style.color = isError ? '#b91c1c' : '#065f46';
        }

        function setAiStatus(msg, isError) {
            if (!aiStatus) return;
            if (!msg) {
                aiStatus.hidden = true;
                aiStatus.textContent = '';
                aiStatus.classList.remove('is-error');
                return;
            }
            aiStatus.hidden = false;
            aiStatus.textContent = msg;
            aiStatus.classList.toggle('is-error', !!isError);
        }

        function renderAiSkeletons() {
            if (!aiGrid) return;
            aiGrid.innerHTML = [0, 1, 2].map(function () {
                return '<div class="pai-guide-ai-skeleton"><div class="sk-img"></div><div class="sk-line"></div><div class="sk-line short"></div><div class="sk-line"></div></div>';
            }).join('');
        }

        function runSuggest() {
            if (!root.dataset.suggestGuidesUrl || state.suggesting) return;
            state.suggesting = true;
            if (suggestBtn) {
                suggestBtn.disabled = true;
                suggestBtn.textContent = 'Finding matches…';
            }
            setAiStatus('Matching your piece to live catalog products…');
            renderAiSkeletons();

            fetch(root.dataset.suggestGuidesUrl, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken
                }
            })
            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
            .then(function (res) {
                state.suggesting = false;
                if (suggestBtn) {
                    suggestBtn.disabled = false;
                    suggestBtn.textContent = 'Suggest 3 guides';
                }
                if (!res.ok) {
                    if (aiGrid) aiGrid.innerHTML = '';
                    setAiStatus(res.j.error || 'Could not suggest guides.', true);
                    return;
                }
                var list = res.j.suggestions || [];
                if (!list.length) {
                    if (aiGrid) aiGrid.innerHTML = '';
                    setAiStatus('No close matches found. Open “Browse manually” below.', true);
                    return;
                }
                setAiStatus('Top ' + list.length + ' guide' + (list.length === 1 ? '' : 's') + ' — tap Use to fill category, type, tags & collections.');
                renderAiSuggestions(list);
            })
            .catch(function () {
                state.suggesting = false;
                if (suggestBtn) {
                    suggestBtn.disabled = false;
                    suggestBtn.textContent = 'Suggest 3 guides';
                }
                if (aiGrid) aiGrid.innerHTML = '';
                setAiStatus('Network error while suggesting guides.', true);
            });
        }

        function renderAiSuggestions(list) {
            if (!aiGrid) return;
            aiGrid.innerHTML = list.map(function (s) {
                var p = s.product || {};
                var img = p.image
                    ? '<img src="' + escapeAttr(p.image) + '" alt="">'
                    : '<div class="pai-guide-card-ph">No image</div>';
                var tags = '';
                if (s.category_name) tags += '<span class="pai-guide-ai-tag">' + escapeHtml(s.category_name) + '</span>';
                if (s.collection && s.collection.title) tags += '<span class="pai-guide-ai-tag">' + escapeHtml(s.collection.title) + '</span>';
                if (p.product_type) tags += '<span class="pai-guide-ai-tag">' + escapeHtml(p.product_type) + '</span>';
                var tplLabel = (p.template_suffix || p.theme_template || '');
                if (tplLabel) tags += '<span class="pai-guide-ai-tag">tpl: ' + escapeHtml(tplLabel === 'Default product' ? 'Default product' : tplLabel) + '</span>';
                // Note: AI suggest cards use slim product list — full metafields load on Use via guide-product fetch
                return '<article class="pai-guide-ai-card" data-suggest-id="' + escapeAttr(p.id || '') + '">'
                    + '<div class="pai-guide-ai-media">' + img + '</div>'
                    + '<div class="pai-guide-ai-body">'
                    + '<div class="pai-guide-ai-title-row"><span class="pai-guide-ai-rank">' + escapeHtml(String(s.rank || '')) + '</span>'
                    + '<div class="pai-guide-ai-title">' + escapeHtml(p.title || '') + '</div></div>'
                    + '<div class="pai-guide-ai-meta">' + tags + '</div>'
                    + '<p class="pai-guide-ai-reason">' + escapeHtml(s.reason || '') + '</p>'
                    + '<div class="pai-guide-ai-actions"><button type="button" class="btn btn-primary pai-guide-ai-use">Use this guide</button></div>'
                    + '</div></article>';
            }).join('');

            aiGrid.querySelectorAll('.pai-guide-ai-use').forEach(function (btn, idx) {
                btn.addEventListener('click', function () {
                    useAiSuggestion(list[idx], btn.closest('.pai-guide-ai-card'));
                });
            });
        }

        function useAiSuggestion(s, cardEl) {
            if (!s || !s.product) return;
            state.selected = s.product;
            state.preferredCollectionId = (s.collection && s.collection.id) ? s.collection.id : null;

            // Sync manual filters for context
            if (s.category_id) {
                root.querySelectorAll('.pai-guide-chip').forEach(function (chip) {
                    chip.classList.toggle('is-active', chip.getAttribute('data-category-id') === s.category_id);
                });
            }
            if (s.collection && collId) {
                collId.value = s.collection.id;
                if (collSelected) collSelected.hidden = false;
                if (collSelectedTitle) collSelectedTitle.textContent = s.collection.title || '';
            }

            if (aiGrid) {
                aiGrid.querySelectorAll('.pai-guide-ai-card').forEach(function (c) {
                    c.classList.remove('is-used');
                });
            }
            if (cardEl) cardEl.classList.add('is-used');

            // Prefer suggested collection first in checklist
            renderPick();
            if (state.preferredCollectionId) {
                var cbs = document.querySelectorAll('.pai-guide-coll-cb');
                var found = false;
                cbs.forEach(function (cb) {
                    if (cb.value === state.preferredCollectionId) {
                        cb.checked = true;
                        found = true;
                        // move to front visually by ensuring it's checked; primary = first checked in apply
                    }
                });
                if (found) {
                    // Reorder: put preferred first among checked for primary collection
                    var preferred = [];
                    var rest = [];
                    cbs.forEach(function (cb) {
                        if (!cb.checked) return;
                        if (cb.value === state.preferredCollectionId) preferred.push(cb);
                        else rest.push(cb);
                    });
                    // applyToForm reads DOM order — reorder DOM nodes
                    var list = document.getElementById('pai-guide-coll-list');
                    if (list && preferred[0]) {
                        var label = preferred[0].closest('label');
                        if (label) list.insertBefore(label, list.firstChild);
                    }
                }
            }

            applyToForm({ silent: false });
        }

        function currentCategory() {
            var active = root.querySelector('.pai-guide-chip.is-active');
            return active ? (active.getAttribute('data-category-id') || '') : '';
        }

        function loadProducts(page) {
            state.categoryId = currentCategory();
            state.collectionId = collId ? collId.value : '';
            if (!state.categoryId && !state.collectionId) {
                productsEl.innerHTML = '<div class="pai-guide-empty">Choose a category and/or collection to browse products.</div>';
                pager.hidden = true;
                if (hintEl) hintEl.textContent = 'Pick a category and/or collection. Collection wins when both are set.';
                return;
            }
            if (state.loading) return;
            state.loading = true;
            if (hintEl) {
                hintEl.textContent = state.collectionId
                    ? 'Loading collection…'
                    : 'Loading…';
            }
            productsEl.innerHTML = '<div class="pai-guide-empty">Loading products…</div>';

            var cursor = state.cursors[page - 1] || null;
            var params = new URLSearchParams();
            if (state.categoryId) params.set('category_id', state.categoryId);
            if (state.collectionId) params.set('collection_id', state.collectionId);
            if (cursor) params.set('cursor', cursor);

            fetch(root.dataset.guideProductsUrl + '?' + params.toString(), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
            .then(function (res) {
                state.loading = false;
                if (!res.ok) {
                    productsEl.innerHTML = '<div class="pai-guide-empty">' + (res.j.error || 'Could not load products.') + '</div>';
                    pager.hidden = true;
                    return;
                }
                var list = res.j.products || [];
                var info = res.j.page_info || {};
                state.page = page;
                state.hasNext = !!info.has_next_page;
                state.endCursor = info.end_cursor || null;
                if (state.hasNext && state.endCursor) {
                    state.cursors[page] = state.endCursor;
                }
                if (hintEl) {
                    hintEl.textContent = list.length
                        ? (list.length + ' product' + (list.length === 1 ? '' : 's') + ' · page ' + page)
                        : 'No products for this filter.';
                }
                if (!list.length) {
                    productsEl.innerHTML = '<div class="pai-guide-empty">No products found. Try another category or collection.</div>';
                } else {
                    productsEl.innerHTML = list.map(function (p) {
                        var selected = state.selected && state.selected.id === p.id ? ' is-selected' : '';
                        var img = p.image
                            ? '<img src="' + escapeAttr(p.image) + '" alt="">'
                            : '<div class="pai-guide-card-ph">No image</div>';
                        return '<button type="button" class="pai-guide-card' + selected + '" data-id="' + escapeAttr(p.id) + '">'
                            + img
                            + '<div class="pai-guide-card-body">'
                            + '<div class="pai-guide-card-title">' + escapeHtml(p.title || '') + '</div>'
                            + '<div class="pai-guide-card-meta">' + escapeHtml((p.status || '').toLowerCase()) + (p.product_type ? ' · ' + escapeHtml(p.product_type) : '') + '</div>'
                            + '</div></button>';
                    }).join('');
                }
                pager.hidden = false;
                pageLabel.textContent = 'Page ' + page;
                prevBtn.disabled = page <= 1;
                nextBtn.disabled = !state.hasNext;
            })
            .catch(function () {
                state.loading = false;
                productsEl.innerHTML = '<div class="pai-guide-empty">Network error loading products.</div>';
                pager.hidden = true;
            });
        }

        function resetPagesAndLoad() {
            state.cursors = [null];
            state.page = 1;
            loadProducts(1);
        }

        function escapeHtml(s) {
            return String(s).replace(/[&<>"']/g, function (c) {
                return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
            });
        }
        function escapeAttr(s) { return escapeHtml(s); }

        function selectProduct(id) {
            fetch(root.dataset.guideProductUrl + '?id=' + encodeURIComponent(id), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
            .then(function (res) {
                if (!res.ok || !res.j.product) {
                    showToast(res.j.error || 'Could not load product.', true);
                    return;
                }
                state.selected = res.j.product;
                renderPick();
                productsEl.querySelectorAll('.pai-guide-card').forEach(function (card) {
                    card.classList.toggle('is-selected', card.getAttribute('data-id') === id);
                });
                // Selecting a guide saves + fills form automatically (no Apply button).
                applyToForm({ silent: false });
            })
            .catch(function () { showToast('Network error.', true); });
        }

        function renderPick() {
            var p = state.selected;
            if (!p) {
                pickPanel.hidden = true;
                return;
            }
            pickPanel.hidden = false;
            document.getElementById('pai-guide-pick-title').textContent = p.title || '';
            var sub = [];
            if (p.category_name) sub.push(p.category_name);
            if (p.product_type) sub.push(p.product_type);
            if (p.theme_template || p.template_suffix) sub.push('tpl: ' + (p.theme_template || p.template_suffix || 'Default product'));
            if (p.tags && p.tags.length) sub.push(p.tags.length + ' tags');
            if (p.collections && p.collections.length) sub.push(p.collections.length + ' collections');
            if (p.color_values && p.color_values.length) sub.push(p.color_values.length + ' colors');
            if (p.metafields && p.metafields.length) sub.push(p.metafields.length + ' metafields');
            document.getElementById('pai-guide-pick-sub').textContent = sub.join(' · ');
            var img = document.getElementById('pai-guide-pick-img');
            if (p.image) {
                img.src = p.image;
                img.hidden = false;
            } else {
                img.removeAttribute('src');
                img.hidden = true;
            }
            var list = document.getElementById('pai-guide-coll-list');
            if (p.collections && p.collections.length) {
                list.hidden = false;
                list.innerHTML = p.collections.map(function (c, i) {
                    return '<label class="pai-guide-coll-chip">'
                        + '<input type="checkbox" class="pai-guide-coll-cb" value="' + escapeAttr(c.id) + '" data-title="' + escapeAttr(c.title || '') + '" checked>'
                        + escapeHtml(c.title || 'Collection')
                        + '</label>';
                }).join('');
            } else {
                list.hidden = true;
                list.innerHTML = '';
            }
            var extra = document.getElementById('pai-guide-extra');
            if (extra) {
                var blocks = [];
                if (p.color_values && p.color_values.length) {
                    blocks.push(
                        '<div class="pai-guide-extra-block"><strong>Color variants (' + escapeHtml(p.color_option || 'Color') + ')</strong>'
                        + '<div class="pai-guide-extra-chips">'
                        + p.color_values.map(function (v) { return '<span class="pai-guide-extra-chip">' + escapeHtml(v) + '</span>'; }).join('')
                        + '</div></div>'
                    );
                }
                var productMfs = friendlyGuideMetafields(p.metafields || []);
                if (productMfs.length) {
                    blocks.push(
                        '<div class="pai-guide-extra-block"><strong>Product metafields on guide</strong>'
                        + '<p class="pai-hint" style="margin:0.2rem 0 0.45rem;">We use these as the checklist for your piece (values come from your notes / edits).</p>'
                        + '<div class="pai-guide-extra-chips">'
                        + productMfs.map(function (m) {
                            return '<span class="pai-guide-extra-chip" title="' + escapeAttr(m.display) + '">'
                                + escapeHtml(m.label)
                                + (m.display ? ': ' + escapeHtml(m.display) : '')
                                + '</span>';
                        }).join('')
                        + '</div></div>'
                    );
                }
                if (blocks.length) {
                    extra.hidden = false;
                    extra.innerHTML = blocks.join('');
                } else {
                    extra.hidden = true;
                    extra.innerHTML = '';
                }
            }
            if (activePill) {
                activePill.hidden = false;
                activePill.textContent = 'Guiding: ' + (p.title || '');
            }
        }

        /** Human-readable product metafields only (no category GIDs / raw JSON). */
        function friendlyGuideMetafields(list) {
            var out = [];
            (list || []).forEach(function (m) {
                if (!m || typeof m !== 'object') return;
                var ns = String(m.namespace || '');
                var source = String(m.source || 'product');
                if (ns === 'shopify' || source === 'category') return;
                var label = String(m.label || m.key || '').trim();
                if (!label) return;
                var display = formatGuideMfDisplay(m);
                if (!display) return;
                out.push({ label: label, display: display });
            });
            return out;
        }

        function formatGuideMfDisplay(m) {
            var raw = m.value == null ? '' : String(m.value).trim();
            if (!raw) return '';
            // Skip metaobject GID lists (category attributes).
            if (raw.indexOf('gid://shopify/Metaobject') !== -1) return '';
            try {
                var parsed = JSON.parse(raw);
                if (parsed && typeof parsed === 'object' && !Array.isArray(parsed) && parsed.value != null && parsed.unit) {
                    var unit = String(parsed.unit).toLowerCase();
                    var short = ({ grams: 'g', ounces: 'oz', inches: 'in', millimeters: 'mm', centimeters: 'cm', meters: 'm', feet: 'ft', yards: 'yd' })[unit] || unit;
                    return String(parsed.value) + ' ' + short;
                }
                if (Array.isArray(parsed)) {
                    if (!parsed.length) return '';
                    if (String(parsed[0]).indexOf('gid://') === 0) return '';
                    return parsed.map(function (x) { return String(x); }).join(', ');
                }
            } catch (e) {}
            return raw.length > 48 ? raw.slice(0, 48) + '…' : raw;
        }

        function applyToForm(opts) {
            opts = opts || {};
            var p = state.selected;
            if (!p) return;
            var copyCategory = document.getElementById('pai-guide-copy-category').checked;
            var copyType = document.getElementById('pai-guide-copy-type').checked;
            var copyTemplateEl = document.getElementById('pai-guide-copy-template');
            var copyTemplate = copyTemplateEl ? copyTemplateEl.checked : true;
            var copyTags = document.getElementById('pai-guide-copy-tags').checked;
            var copyCollections = document.getElementById('pai-guide-copy-collections').checked;
            var copyMetafieldsEl = document.getElementById('pai-guide-copy-metafields');
            var copyMetafields = copyMetafieldsEl ? copyMetafieldsEl.checked : true;
            var copyColorsEl = document.getElementById('pai-guide-copy-colors');
            var copyColors = copyColorsEl ? copyColorsEl.checked : true;

            var selectedCols = [];
            document.querySelectorAll('.pai-guide-coll-cb:checked').forEach(function (cb) {
                selectedCols.push({ id: cb.value, title: cb.getAttribute('data-title') || '' });
            });
            if (!selectedCols.length && collId && collId.value) {
                selectedCols.push({
                    id: collId.value,
                    title: (collSelectedTitle && collSelectedTitle.textContent) || ''
                });
            }
            var payload = {
                guide_product_id: p.id,
                guide_product_title: p.title || '',
                copy_category: copyCategory ? 1 : 0,
                copy_type: copyType ? 1 : 0,
                copy_template: copyTemplate ? 1 : 0,
                copy_tags: copyTags ? 1 : 0,
                copy_collections: copyCollections ? 1 : 0,
                copy_metafields: copyMetafields ? 1 : 0,
                copy_colors: copyColors ? 1 : 0,
                category_id: p.category_id || '',
                category_name: p.category_name || '',
                product_type: p.product_type || '',
                template_suffix: (p.template_suffix != null ? String(p.template_suffix) : ''),
                theme_template: p.theme_template || '',
                status: p.status || '',
                image: p.image || '',
                tags: (p.tags || []).join(', '),
                tags_list: p.tags || [],
                collection_ids: selectedCols.map(function (c) { return c.id; }),
                collection_id: selectedCols[0] ? selectedCols[0].id : '',
                collection_title: selectedCols[0] ? selectedCols[0].title : '',
                collections: (p.collections || []).map(function (c) {
                    return { id: c.id || '', title: c.title || '' };
                }),
                color_option: p.color_option || 'Color',
                color_values: p.color_values || [],
                metafields: p.metafields || []
            };

            var formData = new FormData();
            Object.keys(payload).forEach(function (k) {
                var v = payload[k];
                if (k === 'metafields' && Array.isArray(v)) {
                    v.forEach(function (mf, i) {
                        Object.keys(mf).forEach(function (mk) {
                            formData.append('metafields[' + i + '][' + mk + ']', mf[mk] == null ? '' : String(mf[mk]));
                        });
                    });
                } else if (k === 'collections' && Array.isArray(v)) {
                    v.forEach(function (col, i) {
                        formData.append('collections[' + i + '][id]', col.id || '');
                        formData.append('collections[' + i + '][title]', col.title || '');
                    });
                } else if (Array.isArray(v)) {
                    v.forEach(function (item) { formData.append(k + '[]', item); });
                } else {
                    formData.append(k, v);
                }
            });

            if (!opts.silent) {
                showToast('Saving guide…');
            }

            fetch(root.dataset.applyGuideUrl, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: formData
            })
            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
            .then(function (res) {
                if (!res.ok) {
                    showToast(res.j.message || res.j.error || 'Could not save guide.', true);
                    return;
                }
                var f = res.j.form || {};
                fillShopifyForm(f, copyCategory, copyType, copyTemplate, copyTags, copyCollections, selectedCols);
                syncHiddenGuide(p.id, p.title || '');
                root.dataset.savedGuideId = p.id || '';
                root.dataset.savedGuideTitle = p.title || '';
                try {
                    root.dataset.savedGuideSnapshot = JSON.stringify(f.guide_snapshot || p);
                } catch (e) {}
                showToast('Guide active. Uncheck items to skip them on Shopify sync.');
                // Refresh metafield editor if present (page may need soft reload of plan — values are in form_data).
                if (opts.reloadPlan) {
                    window.location.reload();
                }
            })
            .catch(function () { showToast('Network error saving guide.', true); });
        }

        function clearGuideOnServer() {
            var fd = new FormData();
            fd.append('clear_guide', '1');
            return fetch(root.dataset.applyGuideUrl, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: fd
            });
        }

        function clearGuideLocal() {
            state.selected = null;
            if (pickPanel) pickPanel.hidden = true;
            if (activePill) { activePill.hidden = true; activePill.textContent = ''; }
            if (productsEl) {
                productsEl.querySelectorAll('.pai-guide-card').forEach(function (c) { c.classList.remove('is-selected'); });
            }
            syncHiddenGuide('', '');
            root.dataset.savedGuideId = '';
            root.dataset.savedGuideTitle = '';
            root.dataset.savedGuideSnapshot = '';
            var extra = document.getElementById('pai-guide-extra');
            if (extra) { extra.hidden = true; extra.innerHTML = ''; }
            var mfPlan = document.getElementById('pai-mf-plan');
            if (mfPlan) mfPlan.remove();
        }

        function syncHiddenGuide(id, title) {
            var hidId = document.getElementById('pai-guide-hidden-id');
            var hidTitle = document.getElementById('pai-guide-hidden-title');
            if (hidId) hidId.value = id || '';
            if (hidTitle) hidTitle.value = title || '';
        }

        function restoreSavedGuide() {
            var savedId = (root.dataset.savedGuideId || '').trim();
            if (!savedId) return;

            var snap = null;
            try {
                if (root.dataset.savedGuideSnapshot) {
                    snap = JSON.parse(root.dataset.savedGuideSnapshot);
                }
            } catch (e) {
                snap = null;
            }

            if (snap && (snap.id || snap.title)) {
                state.selected = {
                    id: snap.id || savedId,
                    title: snap.title || root.dataset.savedGuideTitle || '',
                    image: snap.image || null,
                    status: snap.status || '',
                    category_id: snap.category_id || null,
                    category_name: snap.category_name || null,
                    product_type: snap.product_type || '',
                    template_suffix: snap.template_suffix != null ? snap.template_suffix : '',
                    theme_template: snap.theme_template || null,
                    tags: Array.isArray(snap.tags) ? snap.tags : [],
                    collections: Array.isArray(snap.collections) ? snap.collections : [],
                    color_option: snap.color_option || 'Color',
                    color_values: Array.isArray(snap.color_values) ? snap.color_values : [],
                    metafields: Array.isArray(snap.metafields) ? snap.metafields : []
                };
                renderPick();
                syncHiddenGuide(state.selected.id, state.selected.title);
                setOpen(true);
                // If Shopify form fields are still empty, push guide values into them.
                var typeSel = document.querySelector('#pai-shopify-form [data-pai-type-select]');
                if (typeSel && !typeSel.value && state.selected.product_type) {
                    applyToForm({ silent: true });
                }
                return;
            }

            // Fallback: re-fetch live guide product from Shopify
            fetch(root.dataset.guideProductUrl + '?id=' + encodeURIComponent(savedId), {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
            .then(function (res) {
                if (!res.ok || !res.j.product) {
                    state.selected = {
                        id: savedId,
                        title: root.dataset.savedGuideTitle || savedId,
                        tags: [],
                        collections: [],
                        color_values: [],
                        metafields: []
                    };
                    renderPick();
                    syncHiddenGuide(savedId, root.dataset.savedGuideTitle || '');
                    setOpen(true);
                    return;
                }
                state.selected = res.j.product;
                renderPick();
                syncHiddenGuide(state.selected.id, state.selected.title || '');
                setOpen(true);
            })
            .catch(function () {
                state.selected = {
                    id: savedId,
                    title: root.dataset.savedGuideTitle || savedId,
                    tags: [],
                    collections: [],
                    color_values: [],
                    metafields: []
                };
                renderPick();
                syncHiddenGuide(savedId, root.dataset.savedGuideTitle || '');
                setOpen(true);
            });
        }

        function fillShopifyForm(f, copyCategory, copyType, copyTemplate, copyTags, copyCollections, selectedCols) {
            var form = document.getElementById('pai-shopify-form');
            if (!form) return;
            if (copyType && f.product_type) {
                var typeSel = form.querySelector('[data-pai-type-select]');
                if (typeSel) {
                    ensureOption(typeSel, f.product_type, f.product_type);
                    typeSel.value = f.product_type;
                }
            }
            if (copyCategory && f.category_id) {
                var catSel = form.querySelector('[data-pai-category-select]');
                if (catSel) {
                    ensureOption(catSel, f.category_id, f.category_name || f.category_id);
                    catSel.value = f.category_id;
                }
            }
            if (copyTemplate) {
                var tplSel = form.querySelector('[data-pai-template-select]');
                if (tplSel) {
                    var suffix = (f.template_suffix != null) ? String(f.template_suffix) : '';
                    ensureOption(tplSel, suffix, suffix === '' ? 'Default product' : suffix);
                    tplSel.value = suffix;
                }
            }
            if (copyTags) {
                var tagsInput = form.querySelector('[data-pai-tags-input]');
                if (tagsInput) tagsInput.value = f.tags || '';
            }
            if (copyCollections) {
                var search = document.getElementById('pai-collection-search');
                var hidId = document.getElementById('pai-collection-id');
                var hidTitle = document.getElementById('pai-collection-title');
                if (search) search.value = f.collection_title || (selectedCols[0] && selectedCols[0].title) || '';
                if (hidId) hidId.value = f.collection_id || '';
                if (hidTitle) hidTitle.value = f.collection_title || '';
                var wrap = document.getElementById('pai-guide-collection-ids');
                if (wrap) {
                    wrap.innerHTML = '';
                    (f.collection_ids || selectedCols.map(function (c) { return c.id; })).forEach(function (id) {
                        var input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'collection_ids[]';
                        input.value = id;
                        wrap.appendChild(input);
                    });
                }
            }
        }

        function ensureOption(select, value, label) {
            if (!value) return;
            var found = false;
            Array.prototype.forEach.call(select.options, function (opt) {
                if (opt.value === value) found = true;
            });
            if (!found) {
                var opt = document.createElement('option');
                opt.value = value;
                opt.textContent = label || value;
                select.appendChild(opt);
            }
        }

        if (enable) {
            enable.addEventListener('change', function () {
                setOpen(enable.checked);
                if (enable.checked) {
                    if (!state.selected && aiGrid && !aiGrid.children.length) {
                        runSuggest();
                    }
                } else {
                    // Turning off the switch clears the guide (no Clear button).
                    clearGuideOnServer().finally(function () {
                        clearGuideLocal();
                        showToast('Guide cleared. Form fields were not reset.');
                    });
                }
            });
            if (enable.checked) setOpen(true);
        }

        if (suggestBtn) {
            suggestBtn.addEventListener('click', runSuggest);
        }

        root.querySelectorAll('.pai-guide-chip').forEach(function (chip) {
            chip.addEventListener('click', function () {
                root.querySelectorAll('.pai-guide-chip').forEach(function (c) { c.classList.remove('is-active'); });
                chip.classList.add('is-active');
                resetPagesAndLoad();
            });
        });

        if (prevBtn) prevBtn.addEventListener('click', function () {
            if (state.page > 1) loadProducts(state.page - 1);
        });
        if (nextBtn) nextBtn.addEventListener('click', function () {
            if (state.hasNext) loadProducts(state.page + 1);
        });

        productsEl.addEventListener('click', function (e) {
            var card = e.target.closest('.pai-guide-card');
            if (!card) return;
            selectProduct(card.getAttribute('data-id'));
        });

        // Checkbox flags: re-save guide so unchecked items are skipped on Shopify sync.
        var flagTimer = null;
        root.querySelectorAll('.pai-guide-copy-flag').forEach(function (cb) {
            cb.addEventListener('change', function () {
                if (!state.selected) return;
                clearTimeout(flagTimer);
                flagTimer = setTimeout(function () {
                    applyToForm({ silent: true });
                }, 180);
            });
        });
        // Collection chips under the pick card
        if (pickPanel) {
            pickPanel.addEventListener('change', function (e) {
                if (!e.target || !e.target.classList || !e.target.classList.contains('pai-guide-coll-cb')) return;
                if (!state.selected) return;
                clearTimeout(flagTimer);
                flagTimer = setTimeout(function () {
                    applyToForm({ silent: true });
                }, 180);
            });
        }

        var collTimer = null;
        if (collSearch && collResults) {
            collSearch.addEventListener('input', function () {
                clearTimeout(collTimer);
                var q = collSearch.value.trim();
                if (q.length < 1) {
                    collResults.hidden = true;
                    collResults.innerHTML = '';
                    return;
                }
                collTimer = setTimeout(function () {
                    fetch(root.dataset.collectionsUrl + '?q=' + encodeURIComponent(q), {
                        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                    })
                    .then(function (r) { return r.json(); })
                    .then(function (data) {
                        var cols = data.collections || [];
                        if (!cols.length) {
                            collResults.hidden = true;
                            collResults.innerHTML = '';
                            return;
                        }
                        collResults.hidden = false;
                        collResults.innerHTML = cols.map(function (c) {
                            return '<button type="button" data-id="' + escapeAttr(c.id) + '" data-title="' + escapeAttr(c.title || '') + '">'
                                + escapeHtml(c.title || '') + '</button>';
                        }).join('');
                    });
                }, 220);
            });
            collResults.addEventListener('click', function (e) {
                var btn = e.target.closest('button[data-id]');
                if (!btn) return;
                collId.value = btn.getAttribute('data-id');
                collSearch.value = '';
                collResults.hidden = true;
                collResults.innerHTML = '';
                if (collSelected) collSelected.hidden = false;
                if (collSelectedTitle) collSelectedTitle.textContent = btn.getAttribute('data-title') || '';
                resetPagesAndLoad();
            });
        }
        var collClear = document.getElementById('pai-guide-coll-clear');
        if (collClear) {
            collClear.addEventListener('click', function () {
                if (collId) collId.value = '';
                if (collSelected) collSelected.hidden = true;
                if (collSelectedTitle) collSelectedTitle.textContent = '';
                resetPagesAndLoad();
            });
        }

        // Rehydrate previously applied guide after refresh / Shopify sync.
        restoreSavedGuide();
    })();

    var searchInput = document.getElementById('pai-collection-search');
    var hiddenId = document.getElementById('pai-collection-id');
    var hiddenTitle = document.getElementById('pai-collection-title');
    var results = document.getElementById('pai-collection-results');
    if (searchInput && hiddenId && results) {
        var timer = null;
        var url = @json(route('product-ai-import.search-collections'));
        searchInput.addEventListener('input', function () {
            hiddenId.value = '';
            if (hiddenTitle) hiddenTitle.value = '';
            clearTimeout(timer);
            var q = searchInput.value.trim();
            if (q.length < 1) {
                results.hidden = true;
                results.innerHTML = '';
                return;
            }
            timer = setTimeout(function () {
                fetch(url + '?q=' + encodeURIComponent(q), {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    results.innerHTML = '';
                    var items = (data && data.collections) || [];
                    if (!items.length) {
                        results.hidden = true;
                        return;
                    }
                    items.forEach(function (c) {
                        var b = document.createElement('button');
                        b.type = 'button';
                        b.textContent = c.title + (c.handle ? ' (' + c.handle + ')' : '');
                        b.addEventListener('click', function () {
                            hiddenId.value = c.id;
                            if (hiddenTitle) hiddenTitle.value = c.title || '';
                            searchInput.value = c.title;
                            results.hidden = true;
                            results.innerHTML = '';
                        });
                        results.appendChild(b);
                    });
                    results.hidden = false;
                })
                .catch(function () { results.hidden = true; });
            }, 300);
        });
    }

    /* Lifestyle multi-select — persist on server (survives refresh / bg job reload). */
    var lifeGrid = document.getElementById('pai-life-pick-grid');
    var lifeCount = document.getElementById('pai-life-ref-count');
    var lifeForm = document.getElementById('pai-lifestyle-form');
    var lifeMax = {{ (int) config('product_ai_import.lifestyle_max_reference_images', 6) }};
    if (lifeGrid) {
        var lifeRunPickTimer = null;
        var lifeRunPickToast = document.getElementById('pai-life-run-pick-toast');
        function refreshLifePicks() {
            var boxes = lifeGrid.querySelectorAll('.pai-life-pick-input');
            var n = 0;
            boxes.forEach(function (cb) {
                var card = cb.closest('.pai-life-pick');
                if (!card) return;
                card.classList.toggle('is-selected', cb.checked);
                if (cb.checked) n++;
            });
            if (lifeCount) lifeCount.textContent = String(n);
        }
        function persistLifeRunPick() {
            var url = lifeForm ? (lifeForm.getAttribute('data-life-run-pick-url') || '') : '';
            if (!url) return;
            var csrf = document.querySelector('meta[name="csrf-token"]');
            var token = csrf ? csrf.getAttribute('content') : '';
            if (!token) {
                var csrfField = document.querySelector('#pai-lifestyle-form input[name="_token"]');
                token = csrfField ? csrfField.value : '';
            }
            var body = new URLSearchParams();
            body.append('_token', token);
            lifeGrid.querySelectorAll('.pai-life-pick-input:checked').forEach(function (cb) {
                body.append('lifestyle_refs[]', cb.value);
            });
            if (lifeRunPickToast) lifeRunPickToast.textContent = 'Saving selection…';
            return fetch(url, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                credentials: 'same-origin',
                body: body.toString()
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (!lifeRunPickToast) return;
                    lifeRunPickToast.textContent = data.message || ((data.count || 0) + ' saved for lifestyle AI');
                })
                .catch(function () {
                    if (lifeRunPickToast) lifeRunPickToast.textContent = 'Could not save selection — try again.';
                });
        }
        function scheduleLifeRunPickSave() {
            clearTimeout(lifeRunPickTimer);
            lifeRunPickTimer = setTimeout(persistLifeRunPick, 250);
        }
        lifeGrid.addEventListener('change', function (e) {
            if (!e.target.classList.contains('pai-life-pick-input')) return;
            var checked = lifeGrid.querySelectorAll('.pai-life-pick-input:checked').length;
            if (e.target.checked && checked > lifeMax) {
                e.target.checked = false;
                alert('You can select up to ' + lifeMax + ' reference photos.');
            }
            refreshLifePicks();
            scheduleLifeRunPickSave();
        });
        if (lifeForm) {
            lifeForm.addEventListener('submit', function () {
                clearTimeout(lifeRunPickTimer);
                persistLifeRunPick();
            });
        }
        refreshLifePicks();
    }

    /* Enhance pick grid — selection persists on server (survives refresh). */
    var enhGrid = document.getElementById('pai-enhance-pick-grid');
    var enhForm = document.getElementById('pai-enhance-form');
    if (enhGrid) {
        var enhRunPickTimer = null;
        var enhRunPickToast = document.getElementById('pai-enh-run-pick-toast');
        function refreshEnhPicks() {
            enhGrid.querySelectorAll('.pai-enh-pick-input').forEach(function (cb) {
                var card = cb.closest('.pai-life-pick');
                if (card) card.classList.toggle('is-selected', cb.checked);
            });
            updateScaleApplyCount();
        }
        function updateScaleApplyCount() {
            var btn = document.getElementById('pai-enh-scale-apply-btn');
            var host = document.getElementById('pai-enh-scale-refs-host');
            var n = 0;
            var ids = [];
            enhGrid.querySelectorAll('.pai-enh-pick-input:checked').forEach(function (cb) {
                ids.push(cb.value);
                if (cb.getAttribute('data-worn-skip') === '1') {
                    return;
                }
                var hasEnhance = cb.getAttribute('data-has-enhance') === '1';
                var studioAi = cb.getAttribute('data-scale-ok') === '1' && hasEnhance;
                var originalNoAi = hasEnhance !== true && hasEnhance !== '1';
                if (studioAi || originalNoAi) {
                    n++;
                }
            });
            if (btn) {
                if (n < 1) {
                    btn.disabled = true;
                    btn.setAttribute('disabled', 'disabled');
                } else {
                    btn.disabled = false;
                    btn.removeAttribute('disabled');
                }
                btn.setAttribute('data-scale-count', String(n));
                btn.textContent = n > 0
                    ? ('Apply scale to AI photos (' + n + ')')
                    : 'Apply scale to AI photos';
                btn.title = n < 1
                    ? 'Check studio AI photos and/or the measurement photo'
                    : 'Scale checked studio AI picks + measurement original — no AI';
            }
            if (host) {
                host.innerHTML = '';
                ids.forEach(function (id) {
                    var inp = document.createElement('input');
                    inp.type = 'hidden';
                    inp.name = 'enhance_refs[]';
                    inp.value = id;
                    host.appendChild(inp);
                });
            }
        }
        function persistEnhRunPick() {
            var url = enhForm ? (enhForm.getAttribute('data-enh-run-pick-url') || '') : '';
            if (!url) return;
            var csrf = document.querySelector('meta[name="csrf-token"]');
            var token = csrf ? csrf.getAttribute('content') : '';
            if (!token) {
                var csrfField = document.querySelector('#pai-enhance-form input[name="_token"]');
                token = csrfField ? csrfField.value : '';
            }
            var body = new URLSearchParams();
            body.append('_token', token);
            enhGrid.querySelectorAll('.pai-enh-pick-input:checked').forEach(function (cb) {
                body.append('enhance_refs[]', cb.value);
            });
            if (enhRunPickToast) enhRunPickToast.textContent = 'Saving selection…';
            fetch(url, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                credentials: 'same-origin',
                body: body.toString()
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (!enhRunPickToast) return;
                    enhRunPickToast.textContent = data.message || ((data.count || 0) + ' selected for enhance');
                })
                .catch(function () {
                    if (enhRunPickToast) enhRunPickToast.textContent = 'Could not save selection — try again.';
                });
        }
        function scheduleEnhRunPickSave() {
            clearTimeout(enhRunPickTimer);
            enhRunPickTimer = setTimeout(persistEnhRunPick, 250);
        }
        enhGrid.addEventListener('change', function (e) {
            if (!e.target.classList.contains('pai-enh-pick-input')) return;
            refreshEnhPicks();
            scheduleEnhRunPickSave();
        });
        var enhAll = document.getElementById('pai-enh-select-all');
        var enhNone = document.getElementById('pai-enh-select-none');
        if (enhAll) enhAll.addEventListener('click', function () {
            // Include AI “Worn/Measures tip” photos — merchant can override wrong tags.
            enhGrid.querySelectorAll('.pai-enh-pick-input').forEach(function (cb) {
                cb.checked = true;
            });
            refreshEnhPicks();
            scheduleEnhRunPickSave();
        });
        if (enhNone) enhNone.addEventListener('click', function () {
            enhGrid.querySelectorAll('.pai-enh-pick-input').forEach(function (cb) { cb.checked = false; });
            refreshEnhPicks();
            scheduleEnhRunPickSave();
        });
        refreshEnhPicks();
    }

    /* Product scale % — sync slider into enhance posts + Apply (no AI) */
    (function paiEnhScaleUi() {
        var range = document.getElementById('pai-enh-scale-range');
        if (!range) return;
        var valueEl = document.getElementById('pai-enh-scale-value');
        var batchHidden = document.getElementById('pai-enh-scale-pct-batch');
        var applyHidden = document.getElementById('pai-enh-scale-pct-apply');
        var applyForm = document.getElementById('pai-enh-scale-apply-form');

        function syncScale(v) {
            var scaleMax = parseInt(range.getAttribute('max'), 10) || 70;
            v = Math.max(40, Math.min(scaleMax, parseInt(v, 10) || 55));
            range.value = String(v);
            if (valueEl) valueEl.textContent = v + '%';
            if (batchHidden) batchHidden.value = String(v);
            if (applyHidden) applyHidden.value = String(v);
            document.querySelectorAll('.pai-enh-one-scale').forEach(function (inp) {
                inp.value = String(v);
            });
            if (applyForm) {
                applyForm.onsubmit = function () {
                    var host = document.getElementById('pai-enh-scale-refs-host');
                    var grid = document.getElementById('pai-enhance-pick-grid');
                    if (host && grid) {
                        host.innerHTML = '';
                        grid.querySelectorAll('.pai-enh-pick-input:checked').forEach(function (cb) {
                            var inp = document.createElement('input');
                            inp.type = 'hidden';
                            inp.name = 'enhance_refs[]';
                            inp.value = cb.value;
                            host.appendChild(inp);
                        });
                    }
                    return confirm(
                        'Apply ' + v + '% to Primary, then match the other checked AI photos to that size?\n\n'
                        + 'Checked only · Shopify AI pick · from AI master · skips worn.'
                    );
                };
            }
        }
        range.addEventListener('input', function () { syncScale(range.value); });
        syncScale(range.value);
    })();

    /* Single-photo enhance: copy prompt + provider into the one-photo form before submit */
    function syncEnhOneProvider(formId, provider) {
        var form = document.getElementById(formId);
        if (!form) return;
        var hidden = form.querySelector('.pai-enh-one-provider');
        if (hidden) hidden.value = (provider === 'google' || provider === 'openai') ? provider : 'openai';
    }
    function setEnhControlsBusy(busy) {
        // Never disable #pai-enh-batch-provider — disabled fields are omitted from POST,
        // which made Google Enhance fall back to the Settings default (often OpenAI).
        document.querySelectorAll('.pai-enh-one-btn, .pai-enh-card-provider, .pai-life-pick-one, #pai-enhance-form button[type="submit"]').forEach(function (el) {
            el.disabled = !!busy;
        });
    }
    function rememberEnhFocus(form) {
        try {
            var ref = form && form.querySelector('input[name="enhance_refs[]"]');
            if (ref && ref.value) {
                sessionStorage.setItem('pai_enh_focus', 'pai-enh-pair-' + ref.value);
            }
        } catch (err) {}
    }
    document.querySelectorAll('.pai-enh-card-provider').forEach(function (sel) {
        var formId = sel.getAttribute('data-enh-one-form') || '';
        try {
            var saved = sessionStorage.getItem('pai_enh_provider_' + formId);
            if (saved === 'openai' || saved === 'google') {
                sel.value = saved;
            }
        } catch (err) {}
        syncEnhOneProvider(formId, sel.value);
        sel.addEventListener('change', function () {
            syncEnhOneProvider(formId, sel.value);
            try { sessionStorage.setItem('pai_enh_provider_' + formId, sel.value); } catch (err) {}
        });
    });
    var batchProvider = document.getElementById('pai-enh-batch-provider');
    var enhBusy = false;
    document.querySelectorAll('.pai-enh-one-form').forEach(function (form) {
        form.addEventListener('submit', function (e) {
            // Allow multiple photo enhances to queue (server runs 1-by-1). Do not block the next click.
            var promptEl = document.getElementById('enhance_prompt');
            var hidden = form.querySelector('.pai-enh-one-prompt');
            if (hidden && promptEl) {
                hidden.value = promptEl.value || '';
            }
            var extraHidden = form.querySelector('.pai-enh-one-extra');
            if (extraHidden) {
                var formIdForExtra = form.id;
                var cardExtra = document.querySelector('.pai-enh-card-extra[data-enh-one-form="'+formIdForExtra+'"]');
                var sharedExtra = document.getElementById('pai-prompt-extra');
                var cardVal = cardExtra ? String(cardExtra.value || '').trim() : '';
                var sharedVal = sharedExtra ? String(sharedExtra.value || '').trim() : '';
                extraHidden.value = cardVal !== '' ? cardVal : sharedVal;
            }
            var formId = form.id;
            var cardSel = document.querySelector('.pai-enh-card-provider[data-enh-one-form="'+formId+'"]');
            var provider = cardSel ? cardSel.value : (batchProvider ? batchProvider.value : 'openai');
            if (provider !== 'google' && provider !== 'openai') {
                provider = 'openai';
            }
            syncEnhOneProvider(formId, provider);
            try { sessionStorage.setItem('pai_enh_provider_' + formId, provider); } catch (err) {}
            var provField = form.querySelector('.pai-enh-one-provider');
            if (provField && !provField.value) {
                provField.value = 'openai';
            }
            var scaleHidden = form.querySelector('.pai-enh-one-scale');
            var scaleLive = document.getElementById('pai-enh-scale-range');
            if (scaleHidden && scaleLive) {
                scaleHidden.value = String(scaleLive.value || '55');
            }
            if (hidden && !(hidden.value || '').trim() && promptEl && !(promptEl.value || '').trim()) {
                e.preventDefault();
                if (typeof window.paiHideLuxuryLoader === 'function') {
                    window.paiHideLuxuryLoader();
                }
                alert('Enhance prompt is empty. Paste or restore the prompt, then try again.');
                return;
            }
            rememberEnhFocus(form);
            var refEl = form.querySelector('input[name="enhance_refs[]"]');
            if (refEl && refEl.value && typeof window.paiEnhMarkBusy === 'function') {
                window.paiEnhMarkBusy(refEl.value);
            }
            // Soft busy only for double-submit on THIS form — other photo cards stay clickable to queue.
            form.setAttribute('data-pai-submitting', '1');
            var btn = document.querySelector('.pai-enh-one-btn[form="' + form.id + '"]');
            if (btn) btn.disabled = true;
        });
    });
    if (document.getElementById('pai-enhance-form')) {
        document.getElementById('pai-enhance-form').addEventListener('submit', function (e) {
            var submitter = e.submitter || document.activeElement;
            var run = '';
            if (submitter && submitter.getAttribute) {
                run = submitter.getAttribute('data-pai-enh-run')
                    || (submitter.getAttribute('name') === 'pai_enh_run' ? (submitter.value || '') : '')
                    || '';
            }
            var provider = (run === 'google' || run === 'openai')
                ? run
                : ((batchProvider && batchProvider.value) || 'openai');
            if (provider !== 'google' && provider !== 'openai') {
                provider = 'openai';
            }
            var runHidden = document.getElementById('pai-enh-run-value');
            if (runHidden) {
                runHidden.value = provider;
                runHidden.disabled = false;
            }
            if (batchProvider) {
                batchProvider.value = provider;
                batchProvider.disabled = false;
            }
            var scaleRange = document.getElementById('pai-enh-scale-range');
            var scaleBatch = document.getElementById('pai-enh-scale-pct-batch');
            if (scaleBatch && scaleRange) {
                scaleBatch.value = String(scaleRange.value || '55');
            }
            // Batch OpenAI/Google: only the checked photos (never force-select all).
            if (run === 'openai' || run === 'google') {
                document.querySelectorAll('.pai-enh-card-provider').forEach(function (sel) {
                    sel.value = provider;
                    syncEnhOneProvider(sel.getAttribute('data-enh-one-form') || '', provider);
                });
            }
            var checked = document.querySelectorAll('#pai-enhance-pick-grid .pai-enh-pick-input:checked');
            if (!checked.length) {
                e.preventDefault();
                if (typeof window.paiHideLuxuryLoader === 'function') {
                    window.paiHideLuxuryLoader();
                }
                alert('Select at least one photo to enhance. Unchecked photos are skipped.');
                return;
            }
            enhBusy = true;
            try {
                if (checked[0] && checked[0].value) {
                    sessionStorage.setItem('pai_enh_focus', 'pai-enh-pair-' + checked[0].value);
                }
            } catch (err) {}
            if (typeof window.paiEnhMarkBusy === 'function') {
                checked.forEach(function (cb) { window.paiEnhMarkBusy(cb.value); });
            }
            // Disable controls AFTER the browser queues the submit, so pai_enh_run + provider stay in POST.
            setTimeout(function () { setEnhControlsBusy(true); }, 0);
        });
    }
    window.addEventListener('pageshow', function () {
        enhBusy = false;
        setEnhControlsBusy(false);
        if (typeof window.paiHideLuxuryLoader === 'function') {
            window.paiHideLuxuryLoader();
        }
        // Back-navigation from cache: drop per-card spinners if no job is running.
        var bgB = document.getElementById('pai-bg-banner');
        if ((!bgB || bgB.getAttribute('data-busy') !== '1') && typeof window.paiEnhClearBusy === 'function') {
            window.paiEnhClearBusy();
        }
    });

    /* After enhance redirect: land on the same photo card, not the top of the step */
    (function restoreEnhFocus() {
        var id = (location.hash || '').replace(/^#/, '');
        if (!id || id.indexOf('pai-enh-pair-') !== 0) {
            try {
                id = sessionStorage.getItem('pai_enh_focus') || '';
            } catch (err) {
                id = '';
            }
        }
        if (!id) return;
        var el = document.getElementById(id);
        if (!el) return;
        try { sessionStorage.removeItem('pai_enh_focus'); } catch (err) {}
        requestAnimationFrame(function () {
            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
            el.classList.add('pai-enh-pair--flash');
            setTimeout(function () { el.classList.remove('pai-enh-pair--flash'); }, 1800);
        });
    })();

    /* Per-photo enhance/edit loading: show which exact card is running and which are waiting */
    (function initEnhCardBusy() {
        var KEY = 'pai_enh_busy_ids';
        var MODE_KEY = 'pai_enh_busy_modes';
        var bgBanner = document.getElementById('pai-bg-banner');

        function read() {
            try {
                var arr = JSON.parse(sessionStorage.getItem(KEY) || '[]');
                return Array.isArray(arr) ? arr.map(String) : [];
            } catch (err) {
                return [];
            }
        }
        function readModes() {
            try {
                var obj = JSON.parse(sessionStorage.getItem(MODE_KEY) || '{}');
                return obj && typeof obj === 'object' ? obj : {};
            } catch (err) {
                return {};
            }
        }
        function write(ids, modes) {
            try { sessionStorage.setItem(KEY, JSON.stringify(ids)); } catch (err) {}
            try { sessionStorage.setItem(MODE_KEY, JSON.stringify(modes || {})); } catch (err) {}
        }
        function chipFor(card, text, running) {
            var head = card.querySelector('.pai-enh-pair-head');
            if (!head) return;
            var chip = card.querySelector('.pai-enh-busy-chip');
            if (!chip) {
                chip = document.createElement('span');
                chip.className = 'pai-enh-busy-chip';
                chip.setAttribute('role', 'status');
                chip.innerHTML = '<i aria-hidden="true"></i><b></b>';
                head.appendChild(chip);
            }
            chip.classList.toggle('is-waiting', !running);
            chip.querySelector('b').textContent = text;
        }
        function paint() {
            var ids = read();
            var modes = readModes();
            document.querySelectorAll('[data-enh-pair]').forEach(function (card) {
                card.classList.remove('is-enhancing', 'is-enh-queued');
                var chip = card.querySelector('.pai-enh-busy-chip');
                if (chip) chip.remove();
            });
            ids.forEach(function (id, i) {
                var card = document.getElementById('pai-enh-pair-' + id);
                if (!card) return;
                var running = i === 0;
                var mode = modes[id] || 'enhance';
                var runText = mode === 'edit' ? 'Editing this photo…' : 'Enhancing this photo…';
                var waitText = mode === 'edit' ? 'Edit waiting its turn…' : 'Waiting its turn…';
                card.classList.add(running ? 'is-enhancing' : 'is-enh-queued');
                chipFor(card, running ? runText : waitText, running);
                var btn = document.querySelector('.pai-enh-one-btn[form="pai-enh-one-' + id + '"]');
                if (btn) btn.disabled = true;
            });
        }

        window.paiEnhMarkBusy = function (id, mode) {
            id = String(id || '');
            if (id === '') return;
            var ids = read();
            var modes = readModes();
            if (ids.indexOf(id) === -1) {
                ids.push(id);
            }
            if (mode === 'edit') {
                modes[id] = 'edit';
            } else if (!modes[id]) {
                modes[id] = 'enhance';
            }
            write(ids, modes);
            paint();
        };
        window.paiEnhClearBusy = function () {
            try { sessionStorage.removeItem(KEY); } catch (err) {}
            try { sessionStorage.removeItem(MODE_KEY); } catch (err) {}
            paint();
        };

        // Nothing running server-side → a leftover list must not spin forever.
        if (!bgBanner || bgBanner.getAttribute('data-busy') !== '1') {
            try { sessionStorage.removeItem(KEY); } catch (err) {}
            try { sessionStorage.removeItem(MODE_KEY); } catch (err) {}
        }
        paint();
    })();

    /* Enhance picks: native form POST only (no AJAX). Optimistic AJAX showed Original
       while Prepare still used Enhanced because the save never finished. */
    var enhToast = document.getElementById('pai-enh-toast');
    function showEnhToast(msg) {
        if (!enhToast) return;
        enhToast.hidden = false;
        enhToast.textContent = msg;
        clearTimeout(showEnhToast._t);
        showEnhToast._t = setTimeout(function () { enhToast.hidden = true; }, 3200);
    }

    document.querySelectorAll('[data-enh-pair]').forEach(function (pair) {
        pair.addEventListener('submit', function (e) {
            var form = e.target.closest('[data-enh-pick-form]');
            if (!form || !pair.contains(form)) return;
            pair.classList.add('is-busy');
            showEnhToast('Saving Shopify pick…');
            // Native POST — do not preventDefault.
        });

        /* Delete enhance version in-place — no full reload / scroll jump */
        pair.addEventListener('click', function (e) {
            var delBtn = e.target.closest('.pai-enh-version-del');
            if (!delBtn || !pair.contains(delBtn)) return;
            e.preventDefault();
            e.stopPropagation();
            if (!window.confirm('Delete this enhance version?')) return;

            var deleteUrl = delBtn.getAttribute('data-delete-url') || '';
            if (!deleteUrl) return;
            var versionForm = delBtn.closest('.pai-enh-pick-form');
            if (!versionForm) return;
            var versionBtn = versionForm.querySelector('.pai-enh-version');
            var wasActive = versionBtn && versionBtn.classList.contains('is-active');
            var token = csrfToken || (document.querySelector('meta[name="csrf-token"]') || {}).content || '';

            pair.classList.add('is-busy');
            fetch(deleteUrl, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': token
                },
                body: new URLSearchParams({ _token: token, _method: 'DELETE', wizard_step: 'enhance' })
            })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
            .then(function (res) {
                if (!res.ok || !res.d || !res.d.ok) {
                    throw new Error((res.d && res.d.message) || 'Could not delete');
                }

                versionForm.remove();

                var remaining = pair.querySelectorAll('.pai-enh-pick-form .pai-enh-version:not(.pai-enh-version--original)');
                var headHint = pair.querySelector('.pai-enh-versions-head .pai-hint');
                if (headHint) {
                    var n = remaining.length;
                    headHint.textContent = n + ' version' + (n === 1 ? '' : 's') + ' · click to save which one Sync uses';
                }

                remaining.forEach(function (card, idx) {
                    var total = remaining.length;
                    var isLatest = idx === 0;
                    var label = isLatest ? 'Latest' : ('v' + (total - idx));
                    card.classList.toggle('pai-enh-version--latest', isLatest);
                    var badge = card.querySelector('.pai-enh-version-badge');
                    if (isLatest) {
                        if (!badge) {
                            var frame = card.querySelector('.pai-enh-version-frame');
                            if (frame) {
                                badge = document.createElement('span');
                                badge.className = 'pai-enh-version-badge';
                                frame.insertBefore(badge, frame.firstChild);
                            }
                        }
                        if (badge) badge.textContent = 'Latest';
                    } else if (badge) {
                        badge.remove();
                    }
                    var strong = card.querySelector('.pai-enh-version-meta strong');
                    if (strong) strong.textContent = label;
                });

                if (wasActive || remaining.length === 0) {
                    var originalForm = pair.querySelector('.pai-enh-pick-form input[name="enhance_id"][value="0"]');
                    originalForm = originalForm ? originalForm.closest('.pai-enh-pick-form') : null;
                    if (originalForm && remaining.length > 0) {
                        if (typeof originalForm.requestSubmit === 'function') {
                            originalForm.requestSubmit();
                        } else {
                            originalForm.submit();
                        }
                    } else {
                        pair.classList.remove('is-using-enhanced');
                        var statusEl = pair.querySelector('.pai-enh-pair-status');
                        if (statusEl) statusEl.textContent = 'Shopify → Original';
                    }
                }

                if (remaining.length === 0) {
                    var versionsWrap = pair.querySelector('.pai-enh-versions');
                    if (versionsWrap) versionsWrap.remove();
                    var aiSide = pair.querySelector('.pai-enh-side--ai');
                    if (aiSide) {
                        var sourceId = pair.getAttribute('data-source-id') || '';
                        aiSide.innerHTML =
                            '<div class="pai-enh-side-label">Enhanced preview</div>' +
                            '<div class="pai-enh-empty">' +
                            '<p>No AI version yet.</p>' +
                            '<button type="submit" form="pai-enh-one-' + sourceId + '" class="btn btn-primary">Enhance this photo</button>' +
                            '</div>';
                    }
                    pair.classList.add('pai-enh-pair--pending');
                    pair.classList.remove('is-using-enhanced');
                    var status = pair.querySelector('.pai-enh-pair-status');
                    if (status) status.textContent = 'Not enhanced yet';
                    var reBtn = pair.querySelector('.pai-enh-one-btn');
                    if (reBtn) reBtn.textContent = 'Enhance this photo';
                }

                showEnhToast(res.d.message || 'Enhanced photo removed.');
            })
            .catch(function (err) {
                alert(err.message || 'Could not delete.');
            })
            .finally(function () {
                pair.classList.remove('is-busy');
            });
        });
    });

    /* Edit with AI modal (Lifestyle history + Enhance versions) */
    (function initPaiAiEditModal() {
        var modal = document.getElementById('pai-ai-edit-modal');
        var form = document.getElementById('pai-ai-edit-form');
        var titleEl = document.getElementById('pai-ai-edit-title');
        var thumbEl = document.getElementById('pai-ai-edit-thumb');
        var promptEl = document.getElementById('pai-ai-edit-prompt');
        var providerEl = document.getElementById('pai-ai-edit-provider');
        var submitBtn = document.getElementById('pai-ai-edit-submit');
        if (!modal || !form || !titleEl || !thumbEl || !promptEl || !providerEl) return;

        var activeSourceId = '';
        var activeKind = 'lifestyle';
        var csrfToken = (document.querySelector('meta[name="csrf-token"]') || {}).content
            || (document.querySelector('input[name="_token"]') || {}).value
            || '';

        function closeModal() {
            modal.hidden = true;
            document.body.classList.remove('pai-ai-edit-open');
        }

        function showTopBanner(title, msg) {
            var banner = document.getElementById('pai-bg-banner');
            if (!banner) return;
            banner.hidden = false;
            banner.classList.add('is-on');
            banner.setAttribute('data-busy', '1');
            var t = document.getElementById('pai-bg-banner-title');
            var m = document.getElementById('pai-bg-banner-msg');
            if (t) t.textContent = title || 'Editing enhance…';
            if (m) m.textContent = msg || 'Working in the background — you can edit more photos; they queue 1-by-1.';
            var wizRoot = document.querySelector('.pai-wizard');
            if (wizRoot) wizRoot.setAttribute('data-pai-work-busy', '1');
        }

        function openModal(btn) {
            var url = btn.getAttribute('data-edit-url') || '';
            var kind = btn.getAttribute('data-edit-kind') || 'lifestyle';
            var thumb = btn.getAttribute('data-edit-thumb') || '';
            var provider = (btn.getAttribute('data-edit-provider') || 'openai').toLowerCase();
            var title = btn.getAttribute('data-edit-title') || 'Edit with AI';
            if (!url) return;

            activeKind = kind;
            activeSourceId = btn.getAttribute('data-edit-source-id') || '';
            form.action = url;
            form.setAttribute('data-pai-lux-loader', kind === 'enhance' ? 'enhance' : 'lifestyle');
            titleEl.textContent = title;
            thumbEl.src = thumb;
            thumbEl.alt = title;
            if (provider !== 'google' && provider !== 'openai') provider = 'openai';
            providerEl.value = provider;
            promptEl.value = '';
            modal.hidden = false;
            document.body.classList.add('pai-ai-edit-open');
            setTimeout(function () { promptEl.focus(); }, 30);
        }

        document.addEventListener('click', function (e) {
            var openBtn = e.target.closest('[data-pai-ai-edit]');
            if (openBtn) {
                e.preventDefault();
                e.stopPropagation();
                openModal(openBtn);
                return;
            }
            if (e.target.closest('[data-pai-ai-edit-close]')) {
                e.preventDefault();
                closeModal();
            }
        });

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && !modal.hidden) closeModal();
        });

        form.addEventListener('submit', function (e) {
            var notes = (promptEl.value || '').trim();
            if (!notes) {
                e.preventDefault();
                promptEl.focus();
                return;
            }

            // Enhance edits: AJAX queue (same as first enhance) so multiple edits keep their place.
            if (activeKind !== 'enhance') {
                return;
            }

            e.preventDefault();
            e.stopPropagation();

            var url = form.action || '';
            if (!url) return;

            if (activeSourceId && typeof window.paiEnhMarkBusy === 'function') {
                window.paiEnhMarkBusy(activeSourceId, 'edit');
            }
            try {
                if (activeSourceId) sessionStorage.setItem('pai_enh_focus', 'pai-enh-pair-' + activeSourceId);
            } catch (err) {}

            if (typeof window.paiShowLuxuryLoader === 'function') {
                window.paiShowLuxuryLoader('Editing enhance…', 'Queued in the background — you can edit more photos.');
            }
            if (submitBtn) submitBtn.disabled = true;

            var body = new FormData(form);
            fetch(url, {
                method: 'POST',
                body: body,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken
                },
                credentials: 'same-origin'
            })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
            .then(function (res) {
                if (!res.ok || !res.d || res.d.ok === false) {
                    throw new Error((res.d && res.d.message) || 'Could not queue edit.');
                }
                closeModal();
                showTopBanner(
                    'Editing enhance…',
                    res.d.message || 'Edit queued — jobs for this import run one at a time.'
                );
                if (typeof window.paiHideLuxuryLoader === 'function') {
                    window.paiHideLuxuryLoader();
                }
                // Kick the existing bg poller if present.
                if (typeof window.paiKickBgPoll === 'function') {
                    window.paiKickBgPoll();
                }
            })
            .catch(function (err) {
                if (typeof window.paiHideLuxuryLoader === 'function') {
                    window.paiHideLuxuryLoader();
                }
                alert(err.message || 'Could not queue edit.');
            })
            .finally(function () {
                if (submitBtn) submitBtn.disabled = false;
            });
        });
    })();

    /* Lifestyle history: select / delete without full page jump */
    var lifeHistory = document.getElementById('pai-life-history-grid');
    var lifeToast = document.getElementById('pai-life-toast');

    function showLifeToast(msg) {
        if (!lifeToast) return;
        lifeToast.hidden = false;
        lifeToast.textContent = msg;
        clearTimeout(showLifeToast._t);
        showLifeToast._t = setTimeout(function () { lifeToast.hidden = true; }, 2500);
    }

    function applyShopifySelection(selectedId) {
        if (!lifeHistory) return;
        lifeHistory.querySelectorAll('.pai-life-hist-card').forEach(function (card) {
            var id = parseInt(card.getAttribute('data-media-id'), 10);
            var selected = id === selectedId;
            var badge = card.querySelector('.pai-life-shopify-badge');
            var btn = card.querySelector('.pai-life-select-btn');
            card.classList.toggle('pai-media-card--shopify', selected);
            if (badge) {
                if (selected) badge.removeAttribute('hidden');
                else badge.setAttribute('hidden', 'hidden');
            }
            if (btn) {
                btn.disabled = selected;
                btn.textContent = selected ? 'Selected' : 'Use for Shopify';
                btn.classList.toggle('btn-primary', !selected);
                btn.classList.toggle('btn-secondary', selected);
            }
        });
    }

    if (lifeHistory) {
        lifeHistory.addEventListener('click', function (e) {
            var selectBtn = e.target.closest('.pai-life-select-btn');
            var deleteBtn = e.target.closest('.pai-life-delete-btn');
            var card = e.target.closest('.pai-life-hist-card');
            if (!card) return;

            if (selectBtn && !selectBtn.disabled) {
                e.preventDefault();
                var selectUrl = card.getAttribute('data-select-url');
                if (!selectUrl) return;
                card.classList.add('is-busy');
                fetch(selectUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: new URLSearchParams({ _token: csrfToken })
                })
                .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
                .then(function (res) {
                    if (!res.ok || !res.d || !res.d.ok) throw new Error((res.d && res.d.message) || 'Could not select');
                    if (res.d.reload) {
                        showLifeToast(res.d.message || 'Selected for Shopify.');
                        window.location.reload();
                        return;
                    }
                    applyShopifySelection(parseInt(res.d.selected_id, 10));
                    showLifeToast(res.d.message || 'Selected for Shopify.');
                })
                .catch(function (err) {
                    alert(err.message || 'Could not update selection.');
                })
                .finally(function () {
                    card.classList.remove('is-busy');
                });
                return;
            }

            if (deleteBtn) {
                e.preventDefault();
                if (!window.confirm('Delete this lifestyle image from history?')) return;
                var deleteUrl = card.getAttribute('data-delete-url');
                if (!deleteUrl) return;
                card.classList.add('is-busy');
                fetch(deleteUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: new URLSearchParams({ _token: csrfToken, _method: 'DELETE' })
                })
                .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
                .then(function (res) {
                    if (!res.ok || !res.d || !res.d.ok) throw new Error((res.d && res.d.message) || 'Could not delete');
                    // Pending banner cleared (generate→delete undo) — refresh so Sync media goes away.
                    if (res.d.reload) {
                        showLifeToast(res.d.message || 'Deleted.');
                        window.location.reload();
                        return;
                    }
                    card.remove();
                    if (res.d.selected_id) applyShopifySelection(parseInt(res.d.selected_id, 10));
                    showLifeToast(res.d.message || 'Deleted.');
                    if (!lifeHistory.querySelector('.pai-life-hist-card')) {
                        var wrap = document.getElementById('pai-life-history');
                        if (wrap) wrap.remove();
                    }
                })
                .catch(function (err) {
                    alert(err.message || 'Could not delete.');
                    card.classList.remove('is-busy');
                });
            }
        });
    }

    /* Luxury loaders: brief “starting…” only — work continues in background. */
    /* Lock / unlock all Shopify sync CTAs while a background job runs. */
    window.paiSetShopifySyncLocked = function (locked) {
        var wizRoot = document.querySelector('.pai-wizard');
        if (wizRoot) wizRoot.setAttribute('data-pai-work-busy', locked ? '1' : '0');

        var selectors = [
            '#pai-shopify-update-btn',
            '#pai-shopify-create-btn',
            '#pai-shopify-form button[type="submit"]',
            '[data-pai-shopify-update-trigger]',
            '[data-pai-shopify-sync-actions] button',
            '#pai-pipe-banner button[type="submit"]',
            '.pai-pipe-inline-form button[type="submit"]'
        ].join(',');

        document.querySelectorAll(selectors).forEach(function (btn) {
            if (!btn || btn.tagName !== 'BUTTON') return;
            if (locked) {
                btn.disabled = true;
                btn.setAttribute('aria-disabled', 'true');
                btn.setAttribute('title', 'Wait until the current AI/background job finishes (or Stop it), then sync.');
                btn.classList.add('pai-shopify-sync-locked');
                if (btn.classList.contains('btn-primary')) {
                    btn.classList.remove('btn-primary');
                    btn.setAttribute('data-pai-was-primary', '1');
                }
                if (!btn.getAttribute('data-pai-label-idle')) {
                    btn.setAttribute('data-pai-label-idle', btn.textContent.trim());
                }
                if (btn.id === 'pai-shopify-create-btn') {
                    btn.textContent = 'Create Shopify Draft (job running)';
                } else {
                    btn.textContent = 'Update Shopify (job running)';
                }
            } else if (btn.classList.contains('pai-shopify-sync-locked')
                || btn.getAttribute('data-pai-was-primary') === '1') {
                // Server-rendered locked buttons (page loaded mid-job) stay locked until reload.
                if (btn.getAttribute('data-pai-label-idle')) {
                    btn.disabled = false;
                    btn.removeAttribute('aria-disabled');
                    btn.removeAttribute('title');
                    btn.classList.remove('pai-shopify-sync-locked');
                    if (btn.getAttribute('data-pai-was-primary') === '1') {
                        btn.classList.add('btn-primary');
                        btn.removeAttribute('data-pai-was-primary');
                    }
                    btn.textContent = btn.getAttribute('data-pai-label-idle');
                    btn.removeAttribute('data-pai-label-idle');
                }
            }
        });

        var actions = document.querySelector('[data-pai-shopify-sync-actions]');
        if (actions && locked) {
            var hint = actions.querySelector('.pai-pipe-locked-hint');
            if (!hint) {
                hint = document.createElement('span');
                hint.className = 'pai-pipe-quiet-link pai-pipe-locked-hint';
                hint.textContent = 'Finish or Stop the current job first';
                actions.appendChild(hint);
            }
        }
    };

    /* Show Update Shopify banner from ANY step (gallery reorder, metafields, Shopify form edits). */
    (function initShopifyPendingBanner() {
        var host = document.getElementById('pai-pipeline-status');
        if (!host) return;
        var form = document.getElementById('pai-shopify-form');

        function isWorkBusy() {
            var banner = document.getElementById('pai-bg-banner');
            var wizRoot = document.querySelector('.pai-wizard');
            return (banner && banner.getAttribute('data-busy') === '1')
                || (wizRoot && wizRoot.getAttribute('data-pai-work-busy') === '1');
        }

        function ensureBanner(reason) {
            if (host.getAttribute('data-shopify-linked') !== '1') return;
            var existing = document.getElementById('pai-pipe-banner');
            if (existing) {
                if (reason) {
                    var meta = existing.querySelector('.pai-pipe-banner-meta');
                    if (!meta) {
                        meta = document.createElement('p');
                        meta.className = 'pai-pipe-banner-meta';
                        var actions = existing.querySelector('.pai-pipe-banner-actions');
                        if (actions) existing.querySelector('.pai-pipe-banner-body').insertBefore(meta, actions);
                        else existing.querySelector('.pai-pipe-banner-body').appendChild(meta);
                    }
                    meta.textContent = String(reason);
                }
                if (isWorkBusy() && typeof window.paiSetShopifySyncLocked === 'function') {
                    window.paiSetShopifySyncLocked(true);
                }
                return;
            }
            // Hide prepare-only banner when we inject sync CTA.
            var prepOnly = document.getElementById('pai-pipe-banner-prepare');
            if (prepOnly) prepOnly.remove();

            var busy = isWorkBusy();
            var pendingUrl = host.getAttribute('data-run-pending-url') || '';
            var step = host.getAttribute('data-wizard-step') || 'media';
            var syncLabel = host.getAttribute('data-sync-label') || 'Update Shopify';
            var isImprove = host.getAttribute('data-improve') === '1';
            var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content
                || ((form && form.querySelector('input[name="_token"]')) || {}).value || '';
            var reasonHtml = reason
                ? '<p class="pai-pipe-banner-meta">' + String(reason).replace(/</g, '&lt;') + '</p>'
                : '';
            var btnHtml;
            if (busy) {
                btnHtml = '<button type="button" class="btn pai-shopify-sync-locked" disabled aria-disabled="true" title="AI/background job is running — Stop it first, then sync.">' + syncLabel + ' (job running)</button>'
                    + '<span class="pai-pipe-quiet-link pai-pipe-locked-hint">Finish or Stop the current job first</span>';
            } else if (pendingUrl) {
                btnHtml = '<form action="' + pendingUrl + '" method="POST" class="pai-pipe-inline-form" data-pai-lux-loader="shopify-update">'
                    + '<input type="hidden" name="_token" value="' + csrf + '">'
                    + '<input type="hidden" name="wizard_step" value="' + step + '">'
                    + '<button type="submit" class="btn btn-primary" data-pai-shopify-update-trigger>' + syncLabel + '</button>'
                    + '</form>';
            } else if (form && form.getAttribute('data-pai-lux-loader') === 'shopify-update') {
                btnHtml = '<button type="submit" form="pai-shopify-form" class="btn btn-primary" data-pai-shopify-update-trigger>' + syncLabel + '</button>';
            } else {
                btnHtml = '';
            }
            var headline = isImprove ? 'Improved media is not on Shopify yet' : 'Local changes are not on Shopify yet';
            var body = isImprove
                ? 'Press <strong>Sync media</strong> — it will Prepare (crop) pending Enhanced + the how-it-looks / worn photo, then replace the gallery. Listing fields stay untouched.'
                : 'Press <strong>Update Shopify</strong> — prepares if needed, then syncs. Watch the dark Working banner.';
            host.innerHTML =
                '<section class="pai-pipe-banner pai-pipe-banner--shopify" id="pai-pipe-banner">' +
                '<div class="pai-pipe-banner-body">' +
                '<div class="pai-pipe-banner-kicker">Shopify · pending</div>' +
                '<h2>' + headline + '</h2>' +
                '<p>' + body + '</p>' +
                reasonHtml +
                '<div class="pai-pipe-banner-actions" data-pai-shopify-sync-actions">' +
                btnHtml +
                '</div></div></section>';
            var injected = host.querySelector('form[data-pai-lux-loader="shopify-update"]');
            if (injected && !injected.getAttribute('data-pai-lux-bound')) {
                injected.setAttribute('data-pai-lux-bound', '1');
                injected.addEventListener('submit', function (e) {
                    if (isWorkBusy()) {
                        e.preventDefault();
                        alert('Cannot sync while a job is running. Use Stop, then try again.');
                        return;
                    }
                    if (!window.confirm('Update the linked Shopify product? Sync runs in the background — gallery will be replaced when it finishes.')) {
                        e.preventDefault();
                        return;
                    }
                    if (typeof window.paiShowLuxuryLoader === 'function') {
                        window.paiShowLuxuryLoader('Starting Shopify update…', 'Sync runs in the background. Watch the dark banner.');
                    }
                });
            }
        }

        window.paiMarkShopifyPending = ensureBanner;
        if (form && form.getAttribute('data-pai-lux-loader') === 'shopify-update') {
            form.addEventListener('input', function () { ensureBanner(); });
            form.addEventListener('change', function () { ensureBanner(); });
        }
    })();

    var luxMessages = {
        lifestyle: {
            title: 'Starting lifestyle…',
            sub: 'Generate or edit runs in the background. You can keep working — this overlay will close.'
        },
        copy: {
            title: 'Starting listing copy…',
            sub: 'Titles & SEO will finish in the background. You can keep working.'
        },
        enhance: {
            title: 'Starting enhance…',
            sub: 'Polish or edit runs in the background. You can keep working.'
        },
        shopify: {
            title: 'Starting Shopify draft…',
            sub: 'Upload runs in the background. You can open another import anytime.'
        },
        'shopify-update': {
            title: 'Starting Shopify update…',
            sub: 'Sync runs in the background. You can keep working in this browser.'
        },
        prepare: {
            title: 'Starting prepare…',
            sub: 'Crop & compress run in the background. You can keep working.'
        },
        'video-enhance': {
            title: 'Enhancing video with Google Omni…',
            sub: 'Trims the original (~9s, no compress), then AI. Stay on this page — errors show in the banner if it fails.'
        },
        'video-trim': {
            title: 'Trimming original video…',
            sub: 'Cutting ~9s from the full original (not the compressed file). A full backup is kept.'
        }
    };

    document.querySelectorAll('form[data-pai-lux-loader]').forEach(function (form) {
        form.addEventListener('submit', function (e) {
            // Edit-with-AI enhance uses its own AJAX queue + loader (do not hide it here).
            if (form.id === 'pai-ai-edit-form') {
                return;
            }
            // Another handler may have cancelled (busy / empty prompt) — do not leave the overlay stuck.
            if (e.defaultPrevented) {
                if (typeof window.paiHideLuxuryLoader === 'function') {
                    window.paiHideLuxuryLoader();
                }
                return;
            }
            var kind = form.getAttribute('data-pai-lux-loader') || 'lifestyle';
            var submitter = e.submitter || document.activeElement;
            if (kind === 'lifestyle' && submitter && submitter.getAttribute('name') === 'pai_action' && submitter.value === 'save_refs') {
                return; // quick save — no long overlay
            }
            if (kind === 'shopify' || kind === 'shopify-update') {
                var busyBanner = document.getElementById('pai-bg-banner');
                var wizRoot = document.querySelector('.pai-wizard');
                var workBusy = (busyBanner && busyBanner.getAttribute('data-busy') === '1')
                    || (wizRoot && wizRoot.getAttribute('data-pai-work-busy') === '1');
                if (workBusy) {
                    e.preventDefault();
                    alert('Cannot sync to Shopify while an AI/background job is running (photos, video, lifestyle, prepare, copy…). Use Stop on the banner, then try again.');
                    return;
                }
            }
            if (kind === 'shopify') {
                if (!window.confirm('Create this product as DRAFT in Shopify? Work continues in the background after you confirm.')) {
                    e.preventDefault();
                    return;
                }
            }
            if (kind === 'shopify-update') {
                if (!window.confirm('Update the linked Shopify product? Sync continues in the background — gallery on Shopify will be replaced when it finishes.')) {
                    e.preventDefault();
                    return;
                }
            }
            var msg = luxMessages[kind] || luxMessages.lifestyle;
            if (typeof window.paiShowLuxuryLoader === 'function') {
                window.paiShowLuxuryLoader(msg.title, msg.sub);
            }
            form.querySelectorAll('button[type="submit"]').forEach(function (b) {
                b.disabled = true;
            });
        });
    });

    /* Show short loader when navigating into Details (copy may queue server-side). */
    document.querySelectorAll('[data-pai-nav-loader]').forEach(function (link) {
        link.addEventListener('click', function () {
            var kind = link.getAttribute('data-pai-nav-loader') || 'copy';
            var msg = luxMessages[kind] || luxMessages.copy;
            if (typeof window.paiShowLuxuryLoader === 'function') {
                window.paiShowLuxuryLoader(msg.title, msg.sub);
            }
        });
    });

    /* Poll background job status. Always check once; keep polling while running. */
    (function initBgWorkPoll() {
        var banner = document.getElementById('pai-bg-banner');
        if (!banner) return;
        var url = banner.getAttribute('data-status-url') || '';
        if (!url) return;

        var titleEl = document.getElementById('pai-bg-banner-title');
        var msgEl = document.getElementById('pai-bg-banner-msg');
        var queueWrap = document.getElementById('pai-bg-queue');
        var queueList = document.getElementById('pai-bg-queue-list');
        var queueMeta = document.getElementById('pai-bg-queue-meta');
        var statusPill = document.querySelector('.pai-wiz-status');
        var timer = null;
        var sawRunning = banner.getAttribute('data-busy') === '1';
        var idleConfirm = 0;

        function showBanner(on) {
            if (on) {
                banner.hidden = false;
                banner.classList.add('is-on');
                banner.setAttribute('data-busy', '1');
            } else {
                banner.hidden = true;
                banner.classList.remove('is-on');
                banner.setAttribute('data-busy', '0');
            }
            // Do not lock Update Shopify — server queues it 1-by-1 behind the current job.
            var wizRoot = document.querySelector('.pai-wizard');
            if (wizRoot) wizRoot.setAttribute('data-pai-work-busy', on ? '1' : '0');
        }

        function escapeHtml(s) {
            return String(s || '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;');
        }

        function syncEditBusyFromQueue(items, running) {
            if (typeof window.paiEnhMarkBusy !== 'function') return;
            var list = Array.isArray(items) ? items : [];
            list.forEach(function (item) {
                var sid = parseInt(item && item.edit_source_id ? item.edit_source_id : 0, 10) || 0;
                if (sid > 0) {
                    window.paiEnhMarkBusy(String(sid), 'edit');
                }
            });
            if (!running && list.length < 1) {
                return;
            }
        }

        function renderQueue(items, queueCount, running) {
            banner.setAttribute('data-queue-count', String(queueCount || 0));
            if (!queueWrap || !queueList) return;
            var list = Array.isArray(items) ? items : [];
            if (!running && (queueCount || 0) < 1 && list.length < 1) {
                if (!queueWrap.hidden) queueWrap.hidden = true;
                if (queueList.innerHTML !== '') queueList.innerHTML = '';
                if (queueMeta && queueMeta.textContent !== '') queueMeta.textContent = '';
                return;
            }
            queueWrap.hidden = false;
            var nextMeta = (queueCount || 0) > 0 ? (queueCount + ' waiting') : 'Running';
            if (queueMeta && queueMeta.textContent !== nextMeta) {
                queueMeta.textContent = nextMeta;
            }
            var html = '';
            list.forEach(function (item) {
                var isNow = item && item.state === 'now';
                var pos = isNow ? 'Now' : String(item.position || '');
                var label = (item && item.label) ? item.label : 'Queued job';
                html += '<li class="pai-bg-queue-item' + (isNow ? ' is-now' : '') + '">'
                    + '<span class="pai-bg-queue-pos">' + escapeHtml(pos) + '</span>'
                    + '<span class="pai-bg-queue-label">' + escapeHtml(label) + '</span>'
                    + '</li>';
            });
            // Avoid rewriting DOM every poll tick — that resizes the sticky header and yanks scroll.
            if (queueList.getAttribute('data-pai-html') !== html) {
                queueList.setAttribute('data-pai-html', html);
                queueList.innerHTML = html;
            }
            syncEditBusyFromQueue(list, running);
        }

        function poll() {
            fetch(url, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    var queueCount = parseInt(data.bg_queue_count || 0, 10) || 0;
                    var running = !!(data.is_bg_running || data.bg_status === 'running');

                    if (running || queueCount > 0) {
                        sawRunning = true;
                        idleConfirm = 0;
                        if (!timer) timer = setInterval(poll, 2500);
                        showBanner(true);
                        var nextTitle = data.bg_now_label || data.status_label || 'Working…';
                        var nextMsg = data.bg_message || 'Working in the background — jobs for this import run one at a time.';
                        if (titleEl && titleEl.textContent !== nextTitle) titleEl.textContent = nextTitle;
                        if (msgEl && msgEl.textContent !== nextMsg) msgEl.textContent = nextMsg;
                        renderQueue(data.bg_queue_items || [], queueCount, running);
                        if (statusPill && data.status_label && statusPill.textContent !== data.status_label) {
                            statusPill.textContent = data.status_label;
                        }
                        return;
                    }

                    // Only reload when the whole queue is finished (not between chained jobs).
                    // Require 2 idle polls so a brief gap between jobs does not wipe remaining edits.
                    if (sawRunning && (data.bg_status === 'done' || data.bg_status === 'failed') && queueCount < 1) {
                        idleConfirm += 1;
                        if (idleConfirm < 2) {
                            if (!timer) timer = setInterval(poll, 2500);
                            return;
                        }
                        showBanner(false);
                        renderQueue([], 0, false);
                        if (timer) clearInterval(timer);
                        if (typeof window.paiEnhClearBusy === 'function') {
                            window.paiEnhClearBusy();
                        }
                        // Video enhance has its own panel poller — avoid double reload races.
                        if ((data.bg_kind || '') === 'video_enhance') return;
                        var kindDone = data.bg_kind || '';
                        if (kindDone === 'shopify_update' || kindDone === 'shopify_pending' || kindDone === 'shopify_create' || kindDone === 'shopify_improve_sync') {
                            var doneMsg = data.bg_message || (data.bg_status === 'failed'
                                ? 'Shopify sync failed — check the message after reload.'
                                : 'Shopify sync finished.');
                            try { sessionStorage.setItem('pai_shopify_sync_flash', doneMsg + '|' + (data.bg_status || 'done')); } catch (err) {}
                        }
                        // Improve media sync done → leave wizard and return to product list.
                        if (
                            data.bg_status === 'done'
                            && (kindDone === 'shopify_improve_sync' || data.exit_improve_wizard)
                            && data.index_url
                        ) {
                            window.location.href = data.index_url;
                            return;
                        }
                        window.location.reload();
                    }
                })
                .catch(function () { /* ignore transient */ });
        }

        window.paiKickBgPoll = function () {
            sawRunning = true;
            idleConfirm = 0;
            showBanner(true);
            poll();
            if (!timer) timer = setInterval(poll, 2500);
        };

        if (sawRunning && typeof window.paiSetShopifySyncLocked === 'function') {
            window.paiSetShopifySyncLocked(true);
        }
        poll();
        if (sawRunning) timer = setInterval(poll, 2500);
    })();

    /* Details: queue copy only when listing is still empty (never on completed imports). */
    (function initDetailsAutoCopy() {
        var panel = document.getElementById('pai-details-panel');
        if (!panel) return;
        var notes = document.getElementById('product_details');
        var url = panel.getAttribute('data-generate-url') || '';
        var hasImages = panel.getAttribute('data-has-images') === '1';
        var needsCopy = panel.getAttribute('data-needs-copy') === '1';
        if (!notes || !url || !hasImages) return;

        var csrf = document.querySelector('meta[name="csrf-token"]');
        var token = csrf ? csrf.getAttribute('content') : '';
        if (!token) {
            var csrfField = document.querySelector('#pai-listing-form input[name="_token"]');
            token = csrfField ? csrfField.value : '';
        }

        var timer = null;
        var busy = false;
        var lastSent = '';

        function notesReady(text) {
            var t = (text || '').trim();
            if (t.length < 20) return false;
            return /(weight|carats?|material|diamond|price|cost|\b\d{1,2}\s*k\b)/i.test(t);
        }

        function runGenerate(force) {
            var text = (notes.value || '').trim();
            if (!force && !needsCopy) return;
            if (!force && !notesReady(text)) return;
            if (!force && text === lastSent && panel.getAttribute('data-has-suggestions') === '1') return;
            if (busy) return;
            if (panel.getAttribute('data-bg-busy') === '1') return;
            var bannerBusy = document.getElementById('pai-bg-banner');
            if (bannerBusy && bannerBusy.getAttribute('data-busy') === '1') return;
            busy = true;
            lastSent = text;

            var msg = luxMessages.copy || { title: 'Starting listing copy…', sub: '' };
            if (typeof window.paiShowLuxuryLoader === 'function') {
                window.paiShowLuxuryLoader(msg.title, msg.sub);
            }

            var body = new FormData();
            body.append('_token', token);
            body.append('wizard_step', 'details');
            body.append('product_details', text);

            fetch(url, {
                method: 'POST',
                body: body,
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            }).then(function (res) {
                return res.json().then(function (data) {
                    return { ok: res.ok, status: res.status, data: data || {} };
                }).catch(function () {
                    return { ok: res.ok, status: res.status, data: {} };
                });
            }).then(function (pack) {
                if (typeof window.paiHideLuxuryLoader === 'function') {
                    window.paiHideLuxuryLoader();
                }
                busy = false;
                if (!pack.ok && pack.status === 409) {
                    alert((pack.data && pack.data.message) || 'Another job is already running.');
                    return;
                }
                if (!pack.ok) {
                    alert((pack.data && pack.data.message) || 'Could not start copy generation.');
                    return;
                }
                window.location.reload();
            }).catch(function () {
                busy = false;
                if (typeof window.paiHideLuxuryLoader === 'function') {
                    window.paiHideLuxuryLoader();
                }
                alert('Could not generate titles/description. Check notes and try Refresh copy.');
            });
        }

        notes.addEventListener('input', function () {
            clearTimeout(timer);
            if (!needsCopy) return;
            if (panel.getAttribute('data-has-suggestions') === '1') return;
            timer = setTimeout(function () { runGenerate(false); }, 1400);
        });

        var refreshBtn = document.getElementById('pai-copy-refresh');
        if (refreshBtn) {
            refreshBtn.addEventListener('click', function () {
                runGenerate(true);
            });
        }

        // First-time only: notes ready, listing not done, suggestions missing.
        if (needsCopy && panel.getAttribute('data-has-suggestions') !== '1' && notesReady(notes.value)) {
            setTimeout(function () { runGenerate(false); }, 250);
        }
    })();

    /* Lightbox */
    var lb = document.getElementById('pai-lightbox');
    var lbBody = document.getElementById('pai-lb-body');
    var lbTitle = document.getElementById('pai-lb-title');
    var lbTab = document.getElementById('pai-lb-open-tab');
    var lbOrig = document.getElementById('pai-lb-orig');
    if (lb && lbBody && lbTitle && lbTab && lbOrig) {
        function closeLb() {
            lb.hidden = true;
            lbBody.innerHTML = '';
            document.body.style.overflow = '';
        }
        function openLb(btn) {
            var type = btn.getAttribute('data-type') || 'image';
            var src = btn.getAttribute('data-src') || '';
            var orig = btn.getAttribute('data-orig') || '';
            var title = btn.getAttribute('data-title') || '';
            if (!src) return;
            lbTitle.textContent = title;
            lbBody.innerHTML = '';
            if (type === 'video') {
                var v = document.createElement('video');
                v.src = src;
                v.controls = true;
                v.autoplay = true;
                v.playsInline = true;
                lbBody.appendChild(v);
            } else {
                var img = document.createElement('img');
                img.src = src;
                img.alt = title;
                lbBody.appendChild(img);
            }
            lbTab.href = src;
            if (orig && orig !== src) {
                lbOrig.hidden = false;
                lbOrig.href = orig;
            } else {
                lbOrig.hidden = true;
                lbOrig.removeAttribute('href');
            }
            lb.hidden = false;
            document.body.style.overflow = 'hidden';
        }
        document.addEventListener('click', function (e) {
            var openBtn = e.target.closest('[data-pai-lightbox]');
            if (openBtn) {
                e.preventDefault();
                openLb(openBtn);
                return;
            }
            if (e.target.closest('[data-pai-lb-close]')) {
                closeLb();
            }
        });
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape' && !lb.hidden) closeLb();
        });
    }
})();

(function initWizardDelete() {
    var btn = document.getElementById('pai-wiz-delete-btn');
    var form = document.getElementById('pai-wiz-delete-form');
    if (!btn || !form) return;
    btn.addEventListener('click', function () {
        var title = @json($import->title ?: ('Import #'.$import->id));
        if (!window.confirm('Delete “‘ + title + ’”? This removes all photos and data from the app. Shopify is not affected (not linked).')) {
            return;
        }
        var typed = window.prompt('Type DELETE to permanently remove this import:');
        if (!typed || typed.trim().toUpperCase() !== 'DELETE') {
            return;
        }
        form.submit();
    });
})();
</script>
@endpush
@endsection