/* Product Card Badges - Top Right */
.product-card-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
    pointer-events: none; /* Allow clicks to pass through to product link */
}

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    color: white;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
}

.product-badge svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* Product Page Badges - Top Left */
.product-page-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
    pointer-events: none; /* Allow clicks to pass through */
}

.product-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
}

.product-page-badge svg {
    flex-shrink: 0;
}

/* Ensure parent containers have position relative and contain expanding image */
.card-img-top {
    position: relative !important;
    overflow: hidden !important; /* Contain expanding image within card-img-top */
}

/* Remove transform from card-img-top container and apply to image instead */
.products .card .card-img-top {
    transform: none !important; /* Remove transform from container */
}

.products .card:not(.group-banner-card):hover .card-img-top {
    transform: none !important; /* Remove transform from container on hover */
}

/* Apply transform to the image itself instead of the container */
.products .card .card-img-top img {
    transition: transform 0.3s ease !important;
    transform-origin: center !important;
}

.products .card:not(.group-banner-card):hover .card-img-top img {
    transform: scale(1.03) !important; /* Enlarge image by 3% on hover */
}

/* Ensure badges don't move when image scales */
.product-card-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
    pointer-events: none;
}

.product-image-box-left {
    position: relative !important;
}

.carousel-item {
    position: relative !important;
}

.carousel-inner {
    position: relative !important;
}