@php
    use Illuminate\Support\Facades\Storage;

    $img   = $p->mainImage ?? null;
    $disk  = $img->disk ?? 'public';
    $thumb = $img ? data_get($img->meta, 'thumb_312x340') : null;
    $src   = $img
        ? Storage::disk($disk)->url($thumb ?: $img->path)
        : asset('assets/img/product/placeholder.jpg');

    $price       = (float) ($p->price ?? 0);
    $oldPrice    = data_get($p, 'old_price'); // dacă ai câmpul
    $hasDiscount = is_numeric($oldPrice) && $oldPrice > $price;

    $isOnSale = ($showSale ?? false) || $hasDiscount
        || ($p->relationLoaded('categories') && optional($p->categories)->contains(fn($c) => $c->slug === 'on-sale'));
@endphp
@push('styles')
    <style>
        /* =========================
           Product Card (product-store-item)
           ========================= */
        .product-store-item{
            position: relative;
            border: 1px solid var(--bs-border-color);
            border-radius: 14px;
            overflow: hidden;
            background: #fff;
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }
        .product-store-item:hover{
            transform: translateY(-2px);
            box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08);
            border-color: rgba(13,110,253,.35);

        }

        /* ---------- Image ---------- */
        .product-store-item .product-image{
            position: relative;
            background: #f7f7f8;
            overflow: hidden;
        }
        .product-store-item .product-image img{
            width: 100%;
            display: block;
            aspect-ratio: 1 / 1;          /* pătrat – poți adapta */
            object-fit: cover;
            transition: transform .3s ease;
        }
        .product-store-item:hover .product-image img{ transform: scale(1.03); }

        /* gradient discret pentru lizibilitate pe buton */
        .product-store-item .product-image::after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            bottom: -1px;
            height: 70px;
            background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
            z-index: 1; pointer-events: none;
        }

        /* ---------- Sale box ---------- */
        .product-store-item .sale-box{
            position: absolute; left: 12px; top: 12px; z-index: 3;
        }
        .product-store-item .sale-box .box{
            background: #ef4444; color: #fff;
            padding: .2rem .5rem; border-radius: .35rem;
            font-weight: 700; font-size: .8rem; line-height: 1;
        }

        /* ---------- Size (dacă îl folosești) ---------- */
        .product-store-item .product-size{
            position: absolute; left: 12px; bottom: 68px; z-index: 3;
            display: flex; gap: .25rem; padding: 0; margin: 0; list-style: none;
        }
        .product-store-item .product-size li{
            width: 28px; height: 28px; border-radius: 6px;
            background: #fff; border: 1px solid var(--bs-border-color);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: .75rem;
        }

        /* ---------- Social icons (apariție pe hover) ---------- */
        .product-store-item .social-icon{
            position: absolute; top: 12px; right: 12px; z-index: 3;
            display: flex; flex-direction: column; gap: .5rem;
            opacity: 0; transform: translateY(-6px);
            transition: opacity .2s ease, transform .2s ease;
            padding: 0; margin: 0; list-style: none;
        }
        .product-store-item:hover .social-icon{
            opacity: 1; transform: translateY(0);
        }
        .product-store-item .social-icon li{ list-style: none; }
        .product-store-item .social-icon a,
        .product-store-item .social-icon button{
            width: 36px; height: 36px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            background: #fff; border: 1px solid var(--bs-border-color);
            transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
        }
        .product-store-item .social-icon a:hover,
        .product-store-item .social-icon button:hover{
            transform: translateY(-1px);
            box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
            border-color: rgba(13,110,253,.35);
        }

        /* ---------- Cart button: FULL-WIDTH jos pe imagine, mereu vizibil ---------- */
        .product-store-item .cart-btn{
            position: absolute; left: 0px; right: 0px; bottom: 0px;
            z-index: 3;
            opacity: 1 !important;                  /* override la teme care îl ascund */
            transform: translateY(6px) !important;  /* mic slide-up implicit */
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .product-store-item:hover .cart-btn{
            transform: translateY(0) !important;    /* animația la hover rămâne */
        }

        /* butonul pe toată lățimea */
        .product-store-item .cart-btn .theme-btn{
            width: 100%;
            display: inline-flex;
            justify-content: center; align-items: center; gap: .5rem;
        }

        /* shadow discret pe hover card, ca feedback pe buton */
        .product-store-item:hover .cart-btn .theme-btn{
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        }

        /* ---------- Content ---------- */
        .product-store-item .product-content{
            padding: .75rem .85rem 1rem;
        }
        .product-store-item .product-content .content{
            display: flex; align-items: center; justify-content: space-between; gap: .5rem;
            margin-bottom: .25rem;
        }
        .product-store-item .product-content .content > span{
            font-size: .85rem; opacity: .7;
        }
        .product-store-item .product-content .star i{
            color: #FFC107; font-size: .8rem; margin-left: 2px;
        }

        .product-store-item .product-content h5{
            font-size: 1rem; margin: .35rem 0 .15rem; line-height: 1.35;
        }
        .product-store-item .product-content h5 a{
            color: inherit; text-decoration: none;
        }
        .product-store-item .product-content h5 a:hover{ color: #0d6efd; }

        .product-store-item .product-content h6{
            margin: 0; font-weight: 700;
        }
        .product-store-item .product-content h6 del{
            color: var(--bs-secondary-color); font-weight: 400; margin-left: .35rem;
        }

        /* ---------- Color swatches (dacă le folosești) ---------- */
        .product-store-item .list-color-product{
            display: flex; gap: .35rem; padding: 0; margin: .5rem 0 0; list-style: none;
        }
        .product-store-item .list-color-product .list-color-item{
            width: 18px; height: 18px; border-radius: 50%;
            border: 1px solid var(--bs-border-color);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
        }
        .product-store-item .list-color-product .swatch-value{
            width: 12px; height: 12px; border-radius: 50%; display: block;
        }
        .product-store-item .list-color-product .active{
            outline: 2px solid #0d6efd; outline-offset: 1px;
        }

        /* ---------- Responsive fine-tuning ---------- */
        @media (max-width: 575.98px){
            .product-store-item .cart-btn{ left: 10px; right: 10px; bottom: 10px; }
            .product-store-item .product-image::after{ height: 56px; }
        }

    </style>
@endpush
<div class="product-store-item"
     data-product-url="{{ route('product.show', $p->slug) }}">
    <div class="product-image">
        <a href="{{ route('product.show', $p->slug) }}"><img src="{{ $src }}" alt="{{ $p->name }}"></a>

        @if($isOnSale)
            <div class="sale-box">
                <div class="box">{{ $hasDiscount ? (round(100 - ($price / $oldPrice * 100)).'% off') : 'Sale' }}</div>
            </div>
        @endif



        <ul class="social-icon">
            <li>
                <a href="{{ route('product.show', $p->slug) }}"><i class="fa-regular fa-eye"></i></a>
            </li>
        </ul>

    </div>

    <div class="product-content">
        <div class="content">
            <span>{{ $p->brand->name ?? '—' }}</span>
            <div class="star">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
            </div>
        </div>

        <h5><a href="{{ route('product.show', $p->slug) }}">{{ $p->name }}</a></h5>

        <div class="product-footer d-flex align-items-center justify-content-between gap-2 mt-1">
            <h6 class="mb-0">
                {{ number_format($price, 2) }}€
                @if($hasDiscount)
                    <del>{{ number_format($oldPrice, 2) }}€</del>
                @endif
            </h6>

            <a href="{{ route('product.show', $p->slug) }}" class="btn btn-primary btn-cart-icon">
                <i class="fa-solid fa-cart-shopping"></i>
            </a>
        </div>

    </div>
</div>
@push('styles')
    <style>
        /* ... stilurile tale actuale pentru .product-store-item aici ... */

        /* Pe device-uri touch: fără hover/transform ca să nu necesite 2 tap-uri */
        @media (hover: none), (pointer: coarse) {
            .product-store-item,
            .product-store-item:hover{
                transform: none !important;
                box-shadow: none !important;
                border-color: var(--bs-border-color) !important;
            }
            .product-store-item .product-image img,
            .product-store-item:hover .product-image img{
                transform: none !important;
            }
            .product-store-item .social-icon{
                opacity: 1 !important;
                transform: none !important;
            }
        }

        /* ---------- Footer cu preț + buton cart ---------- */
        .product-store-item .product-footer h6{
            margin: 0;
            font-weight: 700;
        }

        .product-store-item .product-footer h6 del{
            color: var(--bs-secondary-color);
            font-weight: 400;
            margin-left: .35rem;
        }

        /* Buton cart simplu, rotund, fără animații */
        .product-store-item .btn-cart-icon{
            width: 44px;
            height: 44px;
            border-radius: 50%;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            background: var(--bs-black)
        }

        /* opțional: mică reducere a fontului pe ecrane foarte mici */
        @media (max-width: 575.98px){
            .product-store-item .btn-cart-icon{
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
        }
    </style>
@endpush
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // doar pe device-uri touch
            const isTouch = window.matchMedia('(hover: none), (pointer: coarse)').matches;
            if (!isTouch) return;

            document.querySelectorAll('.product-store-item[data-product-url]').forEach(function (card) {
                const url = card.getAttribute('data-product-url');
                if (!url) return;

                card.addEventListener('click', function (e) {
                    // dacă ai dat tap direct pe un <a>, lasă comportamentul normal
                    const a = e.target.closest('a');
                    if (a && a.href) return;

                    // altfel: orice tap în card → du-te la produs
                    window.location.href = url;
                });
            });
        });
    </script>
@endpush