/* Button styling */
/* Button styling */
.btn-overlay {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    color: white; /* text white */
    background: linear-gradient(135deg, #0B3037, #134E5E);
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

    /* Hover effect */
    .btn-overlay::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: black;
        transition: left 0.5s ease;
        z-index: 1;
    }

    .btn-overlay span {
        position: relative;
        z-index: 2;
        color: white;
    }

    .btn-overlay:hover::before {
        left: 100%;
    }

    .btn-overlay:hover span {
        color: white;
    }

/* Product Hover Container */
.product-hover-container {
    position: relative;
    width: 100%;
    height: 380px; /* card height fixed */
    overflow: hidden;
    background: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Product Hover Container */
.product-hover-container {
    position: relative;
    width: 100%;
    height: 380px; /* card height fixed */
    overflow: hidden;
    background: #ffffff; /* card background */
    border-radius: 6px;
}

    /* Default & Hover Image */
/* Product Hover Container */
.product-hover-container {
    position: relative;
    width: 100%;
    height: 380px; /* fixed card height */
    overflow: hidden;
    background: #ffffff; /* card background */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Default & Hover Images */
    .product-hover-container .default-img,
    .product-hover-container .hover-img {
        width: 90%; /* thoda zoom out */
        height: 90%; /* thoda zoom out vertically */
        object-fit: contain; /* poora image card me fit ho, crop na ho */
        object-position: center; /* center aligned */
        display: block;
        position: absolute; /* images stack on top of each other */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* perfectly center */
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* Hover Image overlay */
    .product-hover-container .hover-img {
        opacity: 0;
        z-index: 2; /* hover image above default */
    }

    /* Show hover image on hover */
    .product-hover-container:hover .hover-img {
        opacity: 1;
    }

    /* Slight zoom effect on default image only */
    .product-hover-container:hover .default-img {
        transform: translate(-50%, -50%) scale(1.05);
        z-index: 1; /* default image below hover */
    }
    /* Card Overlay Text */
    .product-hover-container .card-img-overlay {
        position: absolute;
        z-index: 3;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 15px;
        background: transparent; /* overlay hata diya */
        color: black; /* text black */
        color: #000000;
        border-radius: 0 0 6px 6px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    /* Product Name */
    .product-hover-container .card-title {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* clean modern font */
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 5px;
        letter-spacing: 0.5px;
    }

    /* Product Category */
    .product-hover-container .card-text:first-of-type {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 0.95rem;
        font-weight: 400;
        margin-bottom: 5px;
        letter-spacing: 0.4px;
    }

    /* Product Price */
    .product-hover-container .card-text:last-of-type {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 10px;
        letter-spacing: 0.5px;
    }

    /* Buttons spacing */
    .product-hover-container .d-flex.gap-2 {
        margin-top: 5px;
    }
.thumb-img {
    width: 60px;
    cursor: pointer;
    border: 2px solid transparent;
}

    .thumb-img.active {
        border-color: #000;
    }

.color-circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    border: 2px solid #ccc;
}

    .color-circle.selected {
        border: 2px solid #000;
    }

.size-btn.selected {
    border-color: #000;
    background-color: #000;
    color: #fff;
}