/* September Spring Refresh: "5% OFF FIRST ORDER" badge on catalogue cards.
   Shows ONLY on products that are NOT already on sale (those keep their own
   red Sale label) and not out of stock. Pure CSS, no markup changes.
   To retire: delete this file and the "22. September Sale card badge" block
   in functions.php.

   Card surfaces covered:
   - Unlimited Elements Woo Product Grid (shop + category pages). Non-sale
     cards uniquely carry .uc_regular_price--single; the :has() form fails
     CLOSED in old browsers (no badge, never a wrong badge).
   - The Plus Addons product list (home page). Woo puts .sale/.outofstock on
     the article, so no :has() needed.
   - Native WooCommerce loops (related products on Elementor product pages).
     .type-product guard keeps this off the lean template's bare related list,
     where on-sale variable products cannot be told apart by CSS. */

ul.products li.product.type-product {
    position: relative;
}

/* All three card types badge off the SAME hook, srs-fo-done, which
   srs-fo-price.js adds only to cards that actually earned the discounted
   price. So the badge and the price can never disagree, and a product held
   out of the sale gets neither. */
.uc_post_grid_style_one_item.srs-fo-done .uc_post_grid_style_one_image::after,
.product-list article.product.srs-fo-done .product-content-image::after,
ul.products li.product.type-product.srs-fo-done::after {
    content: "5% SALE";
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    background: #FF0000;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 4px 6px;
    pointer-events: none;
}

/* First-order price line, written by srs-fo-price.js on non-sale cards:
   regular price struck through, red 95% price with a "first order" note. */

.srs-fo-done .uc_regular_price--single,
.srs-fo-done .wrapper-cart-price .price,
ul.products li.product.srs-fo-done .price,
.srs-fo-done > p.price,
.srs-fo-done > .shym-price {
    text-decoration: line-through;
    opacity: 0.55;
}

/* On the product page itself the price is larger; size the line to sit under it. */
p.price + .srs-fo-price,
.shym-price + .srs-fo-price {
    font-size: 1.15em;
}

/* Note under the configurator's Final Total, only on eligible (non-sale)
   product pages (the srs-fo-pdp body class is set by PHP). A pseudo-element
   survives the configurator re-rendering its totals on every option click.
   Deliberately NOT a computed discounted total: on-sale options (e.g. a
   heater on its own sale) are excluded from the 5%, so a flat 95% figure
   could overpromise. */
body.srs-fo-pdp dl.tm-extra-product-options-totals::after {
    content: "New customers: 5% off applied at checkout";
    display: block;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #FF0000;
}

.srs-fo-price {
    display: block !important; /* UE renders price boxes inline-block; take a full row */
    color: #FF0000;
    font-weight: 700;
    margin-top: 2px;
}

.srs-fo-price .srs-fo-note {
    color: #26222F;
    font-weight: 600;
    font-size: 0.78em;
    margin-left: 5px;
}