@extends('storefront.layout')

@section('title', $product->name . ' — ' . $sfStore->name)

@push('head')
<style>
/* ═══════════════════════════════════════════════════════
   Product Detail  –  mirrors the admin popup visual style
═══════════════════════════════════════════════════════ */

/* Outer shell */
.pd-shell {
    background: var(--sf-surface);
    border-radius: 16px;
    border: 1px solid var(--sf-border-strong);
    box-shadow: var(--sf-shadow-lg);
    overflow: hidden;
    margin-bottom: 2.5rem;
}

/* Two-column body */
.pd-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 820px) {
    .pd-body { grid-template-columns: 2fr 3fr; }
}

/* ── Left: Gallery ── */
.pd-gallery {
    background: linear-gradient(150deg, #edf1f0 0%, #e2eae8 100%);
    border-right: 1px solid var(--sf-border);
    display: flex;
    flex-direction: column;
}
.pd-gallery__main {
    flex: 1;
    min-height: 280px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    position: relative;
}
.pd-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: opacity .18s ease;
}
.pd-gallery__placeholder {
    font-size: 6rem;
    font-weight: 800;
    color: var(--sf-accent);
    opacity: 0.25;
    font-family: var(--sf-font-display);
    line-height: 1;
    user-select: none;
}
/* Arrow nav buttons (hidden when only 1 image) */
.pd-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.82);
    border: 1px solid var(--sf-border-strong);
    box-shadow: 0 1px 6px rgba(0,0,0,.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-ink);
    font-size: 0.9rem;
    transition: background .12s, box-shadow .12s;
    z-index: 2;
}
.pd-gallery__arrow:hover { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.pd-gallery__arrow--prev { left: .55rem; }
.pd-gallery__arrow--next { right: .55rem; }

/* Thumbnail strip */
.pd-gallery__thumbs {
    display: flex;
    gap: .45rem;
    padding: .7rem .8rem;
    border-top: 1px solid var(--sf-border);
    background: rgba(255,255,255,.55);
    flex-wrap: wrap;
}
.pd-gallery__thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    background: var(--sf-bg);
    transition: border-color .13s, transform .12s;
}
.pd-gallery__thumb:hover   { transform: translateY(-1px); border-color: rgba(var(--sf-accent), .4); }
.pd-gallery__thumb.active  { border-color: var(--sf-accent); }
.pd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Right: Info panel ── */
.pd-info {
    padding: 1.6rem 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Header block — name, price, excerpt */
.pd-info__name {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .2rem;
}
.pd-info__name-icon {
    flex-shrink: 0;
    margin-top: .25rem;
    color: var(--sf-ink-faint);
}
.pd-info__name h1 {
    font-family: var(--sf-font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.7rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--sf-ink);
    margin: 0;
}

.pd-info__price-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .5rem;
    margin-bottom: .2rem;
}
.pd-info__price-icon { color: var(--sf-accent); flex-shrink: 0; }
.pd-info__price {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--sf-accent);
    line-height: 1;
}

.pd-info__excerpt {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .55rem;
    margin-bottom: .9rem;
}
.pd-info__excerpt-icon { color: var(--sf-ink-faint); flex-shrink: 0; margin-top: .1rem; }
.pd-info__excerpt-text {
    font-size: 0.86rem;
    color: var(--sf-ink-muted);
    line-height: 1.55;
    margin: 0;
}

/* Info chip row — like the admin popup bordered box */
.pd-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    border: 1px solid var(--sf-border-strong);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.pd-chip {
    padding: .55rem .75rem;
    border-right: 1px solid var(--sf-border-strong);
}
.pd-chip:last-child { border-right: none; }
.pd-chip__label {
    font-size: 0.7rem;
    color: var(--sf-ink-faint);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .15rem;
}
.pd-chip__val {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sf-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider */
.pd-divider {
    height: 1px;
    background: var(--sf-border);
    margin: 1rem 0;
}

/* Variant groups */
.pd-variant-group { margin-bottom: .85rem; }
.pd-variant-group__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sf-ink-muted);
    margin-bottom: .4rem;
}
.pd-variant-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.pd-variant-pill {
    padding: .28rem .8rem;
    border-radius: 999px;
    border: 1.5px solid var(--sf-border-strong);
    background: var(--sf-surface);
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--sf-ink);
    line-height: 1.5;
    transition: border-color .13s, background .13s, color .13s, box-shadow .13s;
}
.pd-variant-pill:hover {
    border-color: var(--sf-accent);
    color: var(--sf-accent);
    box-shadow: 0 0 0 3px var(--sf-accent-soft);
}
.pd-variant-pill.active {
    background: var(--sf-accent);
    border-color: var(--sf-accent);
    color: #fff;
    box-shadow: 0 2px 8px var(--sf-glow);
}
.pd-variant-warn {
    font-size: 0.76rem;
    color: #dc3545;
    margin-top: .3rem;
    display: none;
}
.pd-variant-warn.show { display: block; }

/* Variant image-card mode */
.pd-variant-cards { display: flex; flex-wrap: wrap; gap: .45rem; }
.pd-variant-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .28rem;
    cursor: pointer;
    border: 2px solid var(--sf-border-strong);
    border-radius: 10px;
    padding: .38rem .45rem .32rem;
    background: var(--sf-surface);
    transition: border-color .13s, box-shadow .13s;
    min-width: 64px;
    text-align: center;
}
.pd-variant-card:hover  { border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.pd-variant-card.active { border-color: var(--sf-accent); box-shadow: 0 2px 8px var(--sf-glow); }
.pd-variant-card__img {
    width: 52px; height: 52px;
    border-radius: 7px;
    overflow: hidden;
    background: linear-gradient(145deg, #e8eeec, #dfe8e5);
    flex-shrink: 0;
}
.pd-variant-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-variant-card__ph {
    width: 52px; height: 52px;
    border-radius: 7px;
    background: linear-gradient(145deg, #e8eeec, #dfe8e5);
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 600;
    color: var(--sf-ink-faint);
    letter-spacing: .02em;
}
.pd-variant-card__name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sf-ink);
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.pd-variant-card.active .pd-variant-card__name { color: var(--sf-accent); }

/* Qty badge inside Add to cart button */
.pd-qty-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.28);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    margin: 0 .3rem;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
}

/* Cart row */
.pd-cart {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}
.pd-qty {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--sf-border-strong);
    border-radius: 10px;
    overflow: hidden;
    height: 42px;
}
.pd-qty__btn {
    width: 38px;
    background: none;
    border: none;
    font-size: 1.15rem;
    cursor: pointer;
    color: var(--sf-ink);
    transition: background .11s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pd-qty__btn:hover { background: var(--sf-bg); }
.pd-qty__val {
    width: 40px;
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
    border: none;
    border-left:  1.5px solid var(--sf-border-strong);
    border-right: 1.5px solid var(--sf-border-strong);
    color: var(--sf-ink);
    background: transparent;
    -moz-appearance: textfield;
}
.pd-qty__val::-webkit-outer-spin-button,
.pd-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; }
.pd-add-btn { flex: 1; min-width: 140px; }

/* ── Description section below the card ── */
.pd-desc-section {
    background: var(--sf-surface);
    border-radius: 12px;
    border: 1px solid var(--sf-border);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}
.pd-desc-section__head {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sf-ink-faint);
    margin-bottom: .75rem;
}
.pd-desc-section__body {
    font-size: 0.95rem;
    color: var(--sf-ink-muted);
    line-height: 1.72;
}
.pd-desc-section__body p { margin: 0 0 .75rem; }

/* Back link row */
.pd-back { margin-bottom: 1rem; }
</style>
@endpush

@section('content')

{{-- Breadcrumb --}}
<nav class="sf-crumb" aria-label="Breadcrumb">
    <a href="{{ route('storefront.home',    ['slug' => $sfStore->slug]) }}">Home</a>
    <span aria-hidden="true"> / </span>
    <a href="{{ route('storefront.shop', ['slug' => $sfStore->slug]) }}">Shop</a>
    <span aria-hidden="true"> / </span>
    <span>{{ $product->name }}</span>
</nav>

{{-- ═══ Main product card shell ═══ --}}
<div class="pd-shell">
    <div class="pd-body">

        {{-- ── Left: Gallery ── --}}
        <div class="pd-gallery">
            <div class="pd-gallery__main" id="pdGalleryMain">

                @if(count($gallery) > 0)
                    <img src="{{ $gallery[0] }}" alt="{{ $product->name }}" id="pdMainImg">

                    @if(count($gallery) > 1)
                    <button type="button" class="pd-gallery__arrow pd-gallery__arrow--prev"
                            onclick="pdNav(-1)" aria-label="Previous image">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2.2"
                             stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="15 18 9 12 15 6"/>
                        </svg>
                    </button>
                    <button type="button" class="pd-gallery__arrow pd-gallery__arrow--next"
                            onclick="pdNav(1)" aria-label="Next image">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2.2"
                             stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="9 18 15 12 9 6"/>
                        </svg>
                    </button>
                    @endif
                @else
                    <div class="pd-gallery__placeholder" aria-hidden="true">
                        {{ strtoupper(substr($product->name, 0, 1)) }}
                    </div>
                @endif

            </div>

            {{-- Thumbnail strip --}}
            @if(count($gallery) > 1)
            <div class="pd-gallery__thumbs" id="pdThumbs">
                @foreach($gallery as $i => $imgUrl)
                <div class="pd-gallery__thumb {{ $i === 0 ? 'active' : '' }}"
                     onclick="pdSetImg({{ $i }})" title="Image {{ $i + 1 }}">
                    <img src="{{ $imgUrl }}" alt="View {{ $i + 1 }}" loading="lazy">
                </div>
                @endforeach
            </div>
            @endif
        </div>

        {{-- ── Right: Info panel ── --}}
        <div class="pd-info">

            {{-- Category label --}}
            @if($product->category)
                <span class="sf-card__cat" style="margin-bottom:.45rem;font-size:.72rem;">
                    {{ $product->category->name }}
                </span>
            @endif

            {{-- Product name + icon (matches popup) --}}
            <div class="pd-info__name">
                <span class="pd-info__name-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="1.7"
                         stroke-linecap="round" stroke-linejoin="round">
                        <path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
                        <polyline points="3.29 7 12 12 20.71 7"/><line x1="12" y1="22" x2="12" y2="12"/>
                    </svg>
                </span>
                <h1>{{ $product->name }}</h1>
            </div>

            {{-- Price + icon (matches popup) --}}
            <div class="pd-info__price-row">
                <span class="pd-info__price-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="1.8"
                         stroke-linecap="round" stroke-linejoin="round">
                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="16" y1="13" x2="8" y2="13"/>
                        <line x1="16" y1="17" x2="8" y2="17"/>
                        <polyline points="10 9 9 9 8 9"/>
                    </svg>
                </span>
                <span class="pd-info__price" id="pdPrice">{{ $product->formatted_price }}</span>
            </div>

            {{-- Description excerpt (matches popup) --}}
            @if($product->description)
            @php $descText = strip_tags($product->description); @endphp
            <div class="pd-info__excerpt">
                <span class="pd-info__excerpt-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="1.8"
                         stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"/>
                        <line x1="12" y1="8" x2="12" y2="12"/>
                        <line x1="12" y1="16" x2="12.01" y2="16"/>
                    </svg>
                </span>
                <p class="pd-info__excerpt-text">
                    {{ \Illuminate\Support\Str::limit($descText, 110) }}
                    @if(strlen($descText) > 110)
                        <a href="#pd-full-desc" style="color:var(--sf-accent);font-weight:600;text-decoration:none;margin-left:.2rem;">Read more</a>
                    @endif
                </p>
            </div>
            @endif

            {{-- ── Variant groups + Cart ── --}}
            <form id="pdCartForm" method="post"
                  action="{{ route('storefront.cart.add', ['slug' => $sfStore->slug]) }}">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                @if(!empty($variantGroups))
                    <input type="hidden" name="variant_id" id="pdVariantId" value="">
                @endif
                <input type="hidden" name="qty" id="pdQtyHidden" value="1">

                @if(!empty($variantGroups))
                    @foreach($variantGroups as $groupName => $group)
                    <div class="pd-variant-group" style="margin-top:.9rem;">
                        <div class="pd-variant-group__label">{{ $groupName }}</div>

                        @if($group['has_images'])
                            {{-- Image-card mode --}}
                            <div class="pd-variant-cards">
                                @foreach($group['items'] as $v)
                                <button type="button"
                                        class="pd-variant-card"
                                        data-variant-id="{{ $v['id'] }}"
                                        data-price="{{ $v['formatted_price'] }}"
                                        data-thumbnail="{{ $v['thumbnail'] ?? '' }}"
                                        data-variant-name="{{ $v['name'] }}"
                                        onclick="pdSelectVariant(this)">
                                    @if($v['thumbnail'])
                                        <div class="pd-variant-card__img">
                                            <img src="{{ $v['thumbnail'] }}" alt="{{ $v['name'] }}" loading="lazy">
                                        </div>
                                    @else
                                        <div class="pd-variant-card__ph">
                                            {{ strtoupper(substr($v['name'], 0, 2)) }}
                                        </div>
                                    @endif
                                    <span class="pd-variant-card__name">{{ $v['name'] }}</span>
                                </button>
                                @endforeach
                            </div>
                        @else
                            {{-- Pill mode --}}
                            <div class="pd-variant-pills">
                                @foreach($group['items'] as $v)
                                <button type="button"
                                        class="pd-variant-pill"
                                        data-variant-id="{{ $v['id'] }}"
                                        data-price="{{ $v['formatted_price'] }}"
                                        data-thumbnail="{{ $v['thumbnail'] ?? '' }}"
                                        data-variant-name="{{ $v['name'] }}"
                                        onclick="pdSelectVariant(this)">
                                    {{ $v['name'] }}
                                </button>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    @endforeach

                    <p class="pd-variant-warn" id="pdVariantWarn">Please select an option before adding to cart.</p>
                @endif

                <div class="pd-cart">
                    <div class="pd-qty">
                        <button type="button" class="pd-qty__btn" onclick="pdQtyChange(-1)">−</button>
                        <input  type="number"  class="pd-qty__val" id="pdQtyDisplay" value="1" min="1" max="999"
                                oninput="pdQtySync(this.value)">
                        <button type="button" class="pd-qty__btn" onclick="pdQtyChange(1)">+</button>
                    </div>
                    <button type="submit" class="sf-btn sf-btn--accent pd-add-btn" id="pdAddBtn">Add to cart</button>
                    <a class="sf-btn sf-btn--outline"
                       href="{{ route('storefront.cart', ['slug' => $sfStore->slug]) }}">View cart</a>
                </div>
            </form>

            {{-- Back link --}}
            <div class="pd-back" style="margin-top:1.25rem;">
                <a class="sf-btn sf-btn--outline" style="font-size:.82rem;padding:.3rem .75rem;"
                   href="{{ route('storefront.shop', ['slug' => $sfStore->slug]) }}">← Back to shop</a>
            </div>

            {{-- SKU + Category chips — below back link --}}
            @if($product->sku || $product->category)
            <div class="pd-chips" style="margin-top:.85rem;">
                @if($product->sku)
                <div class="pd-chip">
                    <div class="pd-chip__label">
                        <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2.2"
                             stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
                        </svg>
                        SKU
                    </div>
                    <div class="pd-chip__val">{{ $product->sku }}</div>
                </div>
                @endif
                @if($product->category)
                <div class="pd-chip">
                    <div class="pd-chip__label">
                        <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2.2"
                             stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/>
                            <line x1="7" y1="7" x2="7.01" y2="7"/>
                        </svg>
                        Category
                    </div>
                    <div class="pd-chip__val">{{ $product->category->name }}</div>
                </div>
                @endif
            </div>
            @endif

        </div>{{-- /pd-info --}}
    </div>{{-- /pd-body --}}
</div>{{-- /pd-shell --}}

{{-- ── Full description section ── --}}
@if($product->description)
<div class="pd-desc-section" id="pd-full-desc">
    <div class="pd-desc-section__head">Description</div>
    <div class="pd-desc-section__body">{!! $product->description !!}</div>
</div>
@endif

{{-- ── Related products ── --}}
@if($related->isNotEmpty())
    <div class="sf-section-head" style="margin-top:2rem;">
        <h2 class="sf-section-title">You may also like</h2>
    </div>
    <div class="sf-grid sf-grid--3">
        @foreach($related as $relProduct)
            @include('storefront.partials.product-card', ['product' => $relProduct, 'showAddToCart' => true])
        @endforeach
    </div>
@endif

@include('storefront.partials.float-cart')

<script>
(function () {
    var gallery = @json($gallery);
    var current = 0;

    function pdShow(idx) {
        if (!gallery.length) return;
        current = ((idx % gallery.length) + gallery.length) % gallery.length;
        var img = document.getElementById('pdMainImg');
        if (img) {
            img.style.opacity = '0';
            setTimeout(function () { img.src = gallery[current]; img.style.opacity = '1'; }, 150);
        }
        document.querySelectorAll('.pd-gallery__thumb').forEach(function (t, i) {
            t.classList.toggle('active', i === current);
        });
    }

    window.pdNav    = function (d) { pdShow(current + d); };
    window.pdSetImg = function (i) { pdShow(i); };

    function pdFadeToUrl(url) {
        var img = document.getElementById('pdMainImg');
        if (!img) return;
        img.style.opacity = '0';
        setTimeout(function () { img.src = url; img.style.opacity = '1'; }, 150);
    }

    var CART_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/><line x1="12" y1="10" x2="12" y2="16"/><line x1="9" y1="13" x2="15" y2="13"/></svg>';

    function pdUpdateAddBtn() {
        var btn = document.getElementById('pdAddBtn');
        if (!btn) return;

        var vi        = document.getElementById('pdVariantId'); // null for simple products
        var hasVar    = vi !== null;                            // product has variants
        var varChosen = hasVar && vi.value !== '';

        // No variant chosen yet — prompt the user
        if (hasVar && !varChosen) {
            btn.innerHTML = 'Select Variant';
            return;
        }

        var qty  = parseInt(document.getElementById('pdQtyDisplay').value) || 1;
        var name = varChosen
            ? ((document.querySelector('.pd-variant-pill.active, .pd-variant-card.active') || {}).dataset?.variantName || '')
            : '';
        var mobile = window.innerWidth < 820;

        if (mobile) {
            // Mobile: [badge qty] [name] [cart+ icon]
            btn.innerHTML = '<span class="pd-qty-badge">' + qty + '</span>'
                          + (name ? ' ' + name + ' ' : ' ')
                          + CART_ICON;
        } else {
            // Desktop: Add to Cart [badge qty] [name]
            btn.innerHTML = 'Add to Cart <span class="pd-qty-badge">' + qty + '</span>'
                          + (name ? ' ' + name : '');
        }
    }

    window.pdSelectVariant = function (btn) {
        document.querySelectorAll('.pd-variant-pill, .pd-variant-card').forEach(function (p) { p.classList.remove('active'); });
        btn.classList.add('active');

        var vi = document.getElementById('pdVariantId');
        if (vi) vi.value = btn.dataset.variantId;

        var pr = document.getElementById('pdPrice');
        if (pr) pr.textContent = btn.dataset.price;

        var warn = document.getElementById('pdVariantWarn');
        if (warn) warn.classList.remove('show');

        pdUpdateAddBtn();

        // Swap main gallery image to variant thumbnail if available
        var thumb = btn.dataset.thumbnail;
        if (thumb) {
            var idx = gallery.indexOf(thumb);
            if (idx !== -1) {
                pdShow(idx);
            } else {
                pdFadeToUrl(thumb);
                document.querySelectorAll('.pd-gallery__thumb').forEach(function (t) { t.classList.remove('active'); });
                current = -1;
            }
        }
    };

    window.pdQtyChange = function (d) {
        var el = document.getElementById('pdQtyDisplay');
        var v  = Math.max(1, (parseInt(el.value) || 1) + d);
        el.value = v;
        var h = document.getElementById('pdQtyHidden');
        if (h) h.value = v;
        pdUpdateAddBtn();
    };

    window.pdQtySync = function (val) {
        var v = Math.max(1, parseInt(val) || 1);
        document.getElementById('pdQtyDisplay').value = v;
        var h = document.getElementById('pdQtyHidden');
        if (h) h.value = v;
        pdUpdateAddBtn();
    };

    var form = document.getElementById('pdCartForm');
    if (form) {
        form.addEventListener('submit', function (e) {
            @if(!empty($variantGroups))
            var vi = document.getElementById('pdVariantId');
            if (!vi || !vi.value) {
                e.preventDefault();
                var warn = document.getElementById('pdVariantWarn');
                if (warn) {
                    warn.classList.add('show');
                    warn.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
            @endif
        });
    }

    // Initialise button label on load and keep in sync on resize
    pdUpdateAddBtn();
    window.addEventListener('resize', pdUpdateAddBtn);
})();
</script>

@endsection