/*
 * Pre-order Bubble - v1.5 - Elementor & Custom Theme Fix
 */

/*
 * Rule for Shop/Archive Pages
 * This makes the entire product list item a positioning context.
 */
.woocommerce ul.products li.product {
    position: relative !important;
}

/*
 * Rule for Single Product Page
 * Targets the main image gallery container used by WooCommerce/Elementor.
 */
.woocommerce-product-gallery {
    position: relative !important;
}

/*
 * The bubble itself.
 * This single style now works for both contexts because the parent is correctly set above.
 */
.wpo-preorder-bubble {
    position: absolute;
    top: 15px;    /* Adjust distance from top */
    left: 15px;   /* Adjust distance from left */
    z-index: 99;  /* Ensure it's on top */

    /* Visual Styling - Matched to your site */
    background-color: #38ada9;
    color: #ffffff;
    font-size: 12px;
    font-family: sans-serif; /* A fallback font */
    font-weight: 700;
    line-height: 1.2;
    padding: 7px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}