.image-container {
    position: relative; /* Crucial for positioning hotspots */
    width: fit-content; /* Adjust to your image's width or make responsive */
    margin: auto; /* Center the container */
    border: 1px solid #ccc;
}

.main-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.hotspot {
    position: absolute;
    width: 30px; /* Size of the hotspot */
    height: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #007bff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, background-color 0.2s;
}

.hotspot:hover {
    transform: scale(1.2);
    background-color: #007bff;
    color: white;
}

/* Product Card Styling */
.product-card {
    position: absolute;
    width: 280px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    z-index: 10; /* Ensure card is above other elements */
    display: none; /* Initially hidden */
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(10px); /* Slight animation */
}

.product-card.visible {
    display: flex; /* Use flex when visible */
    opacity: 1;
    transform: translateY(0);
}

.product-card img {
    max-width: 100%; /* Or a fixed width like 150px */
    height: auto;
    margin-bottom: 10px;
    border-radius: 4px;
}

.product-card h3 {
    margin: 10px 0 5px;
    font-size: 1.1em;
    color: #333;
}

.product-card .price {
    font-size: 1.2em;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 10px;
}

.product-card p {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}

.product-card .add-to-cart-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s;
}

.product-card .add-to-cart-btn:hover {
    background-color: #0056b3;
}

/* Specific hotspot positions - you'll need to adjust these */
/* (top, left) coordinates are relative to the image-container */
#hotspot1 { top: 25%; left: 15%; } /* Example: Top-left drawers */
#hotspot2 { top: 15%; left: 50%; transform: translateX(-50%); } /* Example: Top-middle surface */
#hotspot3 { top: 40%; left: 35%; } /* Example: Middle opening */
#hotspot4 { top: 30%; left: 70%; } /* Example: Right cabinet doors */
#hotspot5 { top: 50%; left: 88%; } /* Example: Side of the unit */

/* Product card positions - adjust as needed, e.g., next to the hotspot */
/* It's often better to position these with JavaScript for more dynamic placement,
   but for simplicity, CSS can work if the layout is static.
   Here, we'll let JavaScript position them next to the hotspot. */