/* ====================================================
   FINAL — NO OPACITY BUG • NO OVERLAY BUG • FULL FIX
==================================================== */

/* IMAGE WRAPPER — FIXED SIZE */
.product-image-wrapper {
    position: relative;
    width: 100%;
    height: 260px; /* Fixed image height */
    overflow: hidden;
    background: #fff;
}

    /* MAIN IMAGE */
    .product-image-wrapper .main-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1 !important; /* FORCE visible */
        z-index: 1;
        transition: opacity .3s ease, transform .3s ease;
    }

    /* HOVER IMAGE */
    .product-image-wrapper .hover-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0 !important; /* default hidden */
        z-index: 2;
        transition: opacity .3s ease, transform .3s ease;
    }

/* ON CARD HOVER — ONLY SWAP IMAGES */
.product-card:hover .main-image {
    opacity: 0 !important;
}

.product-card:hover .hover-image {
    opacity: 1 !important;
}

/* PRODUCT CARD */
.product-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    }

    /* PRODUCT CONTENT MUST ALWAYS BE VISIBLE */
    .product-card .card-body {
        position: relative;
        z-index: 10 !important; /* FIX: make sure details appear */
        background: #fff;
    }

    /* TEXT FIX */
    .product-card a,
    .product-card p,
    .product-card span {
        opacity: 1 !important; /* override any accidental opacity */
        color: #111;
    }

/* FADE-UP FIX */
.fade-up {
    opacity: 1 !important; /* prevent invisible bug */
    transform: none !important;
}

/* RESPONSIVE IMAGE HEIGHT */
@media (max-width: 576px) {
    .product-image-wrapper {
        height: 200px;
    }
}