/**
 * ============================================================
 * SPADE — GLOBAL SOLD OUT OVERLAY
 * ============================================================
 *
 * Used by:
 * - Homepage New Arrivals
 * - Homepage Featured Picks
 * - WooCommerce shop/archive cards
 * - Custom collection cards
 */

.spade-new-product__media,
.spade-featured-card__media,
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    position: relative;
}


/* ------------------------------------------------------------
   SHARED SOLD OUT STRIP
   ------------------------------------------------------------ */

.spade-soldout-overlay {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 40 !important;

    transform: translate(-50%, -50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    width: min(72%, 230px) !important;
    min-width: 150px !important;
    max-width: 230px !important;

    height: auto !important;
    min-height: 50px !important;

    margin: 0 !important;
    padding: 14px 22px !important;

    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 0 !important;

    background: rgba(255, 255, 255, 0.80) !important;

    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);

    color: #202020 !important;

    font-family: "Manrope", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    letter-spacing: 0.14em !important;
    text-align: center !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;

    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.045),
        0 0 22px rgba(215, 0, 109, 0.05) !important;

    pointer-events: none !important;
}


/*
 * Override existing corner-badge rules on Spade custom cards.
 */
.spade-new-product__badge--sold-out.spade-soldout-overlay,
.spade-product-badge--sold-out.spade-soldout-overlay {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(72%, 230px) !important;

    transform: translate(-50%, -50%) !important;
}


/* ------------------------------------------------------------
   DIM ONLY THE PRODUCT IMAGE
   ------------------------------------------------------------ */

.spade-new-product__media:has(.spade-soldout-overlay)
.spade-new-product__image--primary,

.spade-featured-card__media:has(.spade-soldout-overlay)
.spade-featured-card__image--primary,

.woocommerce ul.products li.product.outofstock img:first-of-type {
    opacity: 0.46 !important;
}


/*
 * SOLD OUT products must never display the hover/secondary image.
 * PHP also skips rendering it, while this acts as a CSS fallback.
 */
.spade-new-product__media:has(.spade-soldout-overlay)
.spade-new-product__image--hover,

.spade-featured-card__media:has(.spade-soldout-overlay)
.spade-featured-card__image--hover {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


/*
 * Keep only the primary image faded when the sold-out card is hovered.
 */
.spade-new-product__media:has(.spade-soldout-overlay):hover
.spade-new-product__image--primary,

.spade-featured-card__media:has(.spade-soldout-overlay):hover
.spade-featured-card__image--primary,

.woocommerce ul.products li.product.outofstock:hover img:first-of-type {
    opacity: 0.46 !important;
}


/*
 * Product names, prices and BNPL remain full opacity.
 */
.spade-new-product:has(.spade-soldout-overlay)
.spade-new-product__info,

.spade-featured-card:has(.spade-soldout-overlay)
.spade-featured-card__info,

.woocommerce ul.products li.product.outofstock
.woocommerce-loop-product__title,

.woocommerce ul.products li.product.outofstock
.price {
    opacity: 1 !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    .spade-soldout-overlay,
    .spade-new-product__badge--sold-out.spade-soldout-overlay,
    .spade-product-badge--sold-out.spade-soldout-overlay {
        width: min(78%, 175px) !important;
        min-width: 118px !important;
        max-width: 175px !important;

        min-height: 42px !important;

        padding: 11px 14px !important;

        font-size: 10px !important;
        letter-spacing: 0.12em !important;
    }

}


/*
 * Defensive fallback:
 * if a cached/custom template still outputs the hover image,
 * hide it whenever a SOLD OUT overlay exists.
 */
.spade-new-product:has(.spade-soldout-overlay)
.spade-new-product__image--hover,

.spade-featured-card:has(.spade-soldout-overlay)
.spade-featured-card__image--hover {
    display: none !important;
}