<div class="card glass h-100 product-card border-0">
    <div class="product-img-wrapper position-relative">
        {% if product.is_featured %}
        <span class="badge bg-neon-purple position-absolute top-0 end-0 m-3 orbitron" style="background-color: var(--neon-purple); z-index: 1;">FEATURED</span>
        {% endif %}
        {% if product.image_url %}
        <img src="{{ product.image_url }}" class="product-img" alt="{{ product.name }}">
        {% else %}
        <div class="d-flex align-items-center justify-content-center h-100 text-secondary">
            <i class="bi bi-cpu fs-1"></i>
        </div>
        {% endif %}
    </div>
    <div class="card-body d-flex flex-column p-4">
        <div class="d-flex justify-content-between align-items-start mb-2">
            <h5 class="card-title text-white mb-0">{{ product.name }}</h5>
            <span class="neon-text-blue fw-bold">${{ product.price }}</span>
        </div>
        <p class="card-text text-secondary small flex-grow-1">{{ product.description|truncatewords:15 }}</p>
        <div class="mt-auto pt-3">
            <button class="btn btn-outline-info w-100 glass rounded-pill border-secondary text-white hover-blue">
                <i class="bi bi-plus-circle me-2"></i>ADD TO CART
            </button>
        </div>
    </div>
</div>

<style>
    .hover-blue:hover {
        background: var(--neon-blue) !important;
        border-color: var(--neon-blue) !important;
        color: #000 !important;
        box-shadow: 0 0 15px var(--neon-blue);
    }
</style>
