/* --- Positioning Wrapper for Shop/Archive Pages --- */
/* This makes the product link a positioning context for the badge */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    position: relative;
    display: block;
}

/* --- Positioning Wrapper for Single Product Page --- */
/* This makes the main gallery a positioning context for the badge */
.woocommerce div.product .woocommerce-product-gallery {
    position: relative;
}

/* Forcefully hide the Astra theme's sale badge if the product is a pre-order */
.product.is-preorder .ast-onsale-card {
    display: none !important;
}
/* --- Pre-Order Badge Styling (Now Overlays the Image) --- */
/*
=========================================================
1. PRE-ORDER BADGE STYLING
=========================================================
*/

/* Step 1: Make the image container on the single product page a relative boundary */
.single-product div.images.woocommerce-product-gallery {
    position: relative;
}

/* Step 2: Position the badge absolutely within that boundary */
.preorder-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #ff0000;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    z-index: 99;
}/* Style for the badge itself - STRONGER RULE */


/* --- Countdown Timer Styling --- */
.preorder-countdown {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #ff0000 !important;
    font-weight: 600;
    clear: both;
    width: 100%;
}



/*
=========================================================
5. PRE-ORDER EXPECTED DELIVERY NOTICE BOX
=========================================================
*/
.preorder-delivery-notice {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    padding: 15px;
    margin: 20px 0; /* Adds space above and below */
    background-color: #f0f8f0; /* Light green background */
    border-left: 5px solid #4CAF50; /* Green left border */
    border-radius: 4px;
}

.preorder-delivery-notice .notice-icon {
    margin-right: 15px;
    color: #4CAF50; /* Green icon color */
}

.preorder-delivery-notice .notice-text {
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}

.preorder-delivery-notice .notice-text strong {
    color: #000;
}