/* =========================================================
   ULTRA-LUXURY MULTI-IMAGE POP-OUT PREVIEW ENGINE
   ========================================================= */

/* ১. মূল কার্ড - যাতে মাউস নিলে কার্ডের লেয়ার সবার উপরে ওঠে */
.product-card, .card {
    position: relative;
    border-radius: 16px;
    background: rgba(22, 27, 34, 0.75);
    border: 1px solid rgba(244, 183, 61, 0.15);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

.product-card:hover, .card:hover {
    z-index: 99; /* মাউস আনলে সম্পূর্ণ কার্ডটি সবার উপরে ভেসে উঠবে */
    border-color: rgba(244, 183, 61, 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 
                0 0 30px rgba(244, 183, 61, 0.2);
}

/* ২. ইমেজ কন্টেইনার - পপ-আউট দেখার জন্য overflow visible */
.product-card .img-wrap, .card .card-img-wrap {
    position: relative;
    overflow: visible !important;
    border-radius: 12px;
}

/* ৩. বড় পপ-আউট থ্রিডি জুম (Pop-out 3D Effect) */
.product-card img, .card img {
    border-radius: 12px;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.2), filter 0.3s ease;
    will-change: transform;
    pointer-events: none; /* যাতে মাউস ক্লিক বা স্ক্রলে ঝামেলা না করে */
}

/* মাউস সরালে ছবি কার্ডের বাইরে আরও বড় হয়ে বের হবে (২৫% জুম) */
.product-card:hover img, .card:hover img {
    transform: scale(1.25) translateY(-10px); 
    filter: brightness(1.08) drop-shadow(0 20px 25px rgba(0, 0, 0, 0.75));
}

/* ৪. মাল্টিপল ইমেজের জন্য ইন্ডিকেটর/ডট (Multi-Image Dots) */
.luxury-img-dots {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

.product-card:hover .luxury-img-dots,
.card:hover .luxury-img-dots {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* টাচ/মোবাইল ডিভাইসে :hover কখনো ট্রিগার হয় না, তাই ডট নেভিগেশন সবসময় দৃশ্যমান রাখা হলো যাতে ট্যাপ করে ছবি পরিবর্তন করা যায় */
@media (hover: none) {
    .luxury-img-dots {
        opacity: 1;
        transform: translateX(-50%);
    }
}

.luxury-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.luxury-dot.active, .luxury-dot:hover {
    background: #F4B73D;
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(244, 183, 61, 0.8);
}

/* ৫. মাল্টিপল ইমেজ থাকলে তার ব্যাজ (Count Badge) */
.multi-img-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(13, 17, 23, 0.8);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(244, 183, 61, 0.4);
    color: #F4B73D;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    z-index: 100;
    pointer-events: none;
}

/* ৬. মোবাইল রেসপন্সিভ এডজাস্টমেন্ট */
@media (max-width: 768px) {
    .product-card:hover img, .card:hover img,
    .product-card:active img, .card:active img {
        transform: scale(1.1) translateY(-4px); /* মোবাইলে ভারসাম্য বজায় রাখবে এবং :active যোগ করা হলো যাতে ট্যাপেও কাজ করে */
    }
}