/* Robust CSS for Viral TikTok Badge */

/* Ensure parent container is relative if it isn't already */
.product.product-viral-tiktok,
.product-viral-tiktok .woocommerce-loop-product__link,
.product-viral-tiktok .woocommerce-product-gallery,
.product-viral-tiktok .product-image,
.product-viral-tiktok .product-thumbnail {
    position: relative;
}

.vt-badge {
    pointer-events: none !important;
    transition: all 0.3s ease;
}

/* Catalog Badge Positioning: Bottom Right */
.vt-badge-catalog {
    bottom: var(--vt-catalog-bottom);
    right: var(--vt-catalog-right);
    width: var(--vt-catalog-size-desktop);
}

/* Single Product Badge Positioning: Top Right */
.vt-badge-single {
    top: var(--vt-single-top);
    right: var(--vt-single-right);
    width: var(--vt-single-size-desktop);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .vt-badge-catalog {
        width: var(--vt-catalog-size-mobile);
    }
    .vt-badge-single {
        width: var(--vt-single-size-mobile);
    }
}

/* Fix for themes where the badge might be hidden by overflow */
.woocommerce-loop-product__link {
    display: block;
    overflow: visible !important;
}

/* Ensure the badge is visible above hover effects but doesn't break them */
.product:hover .vt-badge {
    opacity: 1;
    z-index: calc(var(--vt-z-index) + 1);
}