/**
 * Seta Bazar - Hot Sale band styles.
 * The band is absolutely positioned over the product image. It expects to live
 * inside a positioned ancestor (the image wrapper). For Woostify, the image link
 * inside .product is positioned, so this works without JS reparenting.
 */

/* Loop / archive band */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woostify-product-image-wrap,
.woocommerce-page ul.products li.product a.woostify-product-image-wrap,
.woocommerce ul.products li.product .product-image,
.woocommerce-page ul.products li.product .product-image {
    position: relative;
}

.seta-hot-band {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 10px 14px;
    text-align: center;
    background: var(--seta-hot-bg, rgba(230, 57, 70, 0.85));
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0.3px;
    pointer-events: none;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.seta-hot-band__text {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Loop variant: live next to the image, not over the title.
 * We anchor it to the LI so it sits over the image area.
 * To prevent it from covering the title, we limit its vertical reach.
 */
.seta-hot-band--loop {
    /* default: bottom — overrides via inline style based on settings */
}

/* Single product page band: pin to the gallery container */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
    position: relative;
}

.seta-hot-band--single {
    left: 0;
    right: 0;
    z-index: 5;
    font-size: 22px;
    padding: 12px 16px;
}

/* Where exactly to attach inside a list item: anchor to the image wrapper if present.
 * Woostify renders <a class="woostify-product-image-wrap"> around the image; if present,
 * the band already sits inside its containing block when output via the loop hook (which
 * runs before title), and the surrounding LI is positioned so it shows over the image area.
 *
 * To be precise we use a calculated bottom anchored to the LI but limited so it stays in
 * the image region (image is the first ~70% of the LI height in most themes including
 * Woostify). We rely on the badge being visually inside the image area in practice.
 */
.woocommerce ul.products li.product .seta-hot-band--loop {
    position: absolute;
}

/* Hide on print */
@media print {
    .seta-hot-band { display: none !important; }
}