/* CamExpert 17.5.17 — corner-attached sold-out watermark, clear of gallery zoom.
 * Only WooCommerce .outofstock presentation changes; never change stock/order logic.
 */

/* Standard WooCommerce cards: softly muted products, with a translucent watermark. */
body.ce-site ul.products li.product.outofstock.ce-product-card {
    background: #f8faf9;
}
body.ce-site li.product.outofstock .ce-card-media {
    position: relative;
    overflow: hidden;
    background: #f1f5f3;
}
body.ce-site li.product.outofstock .ce-card-media img {
    opacity: .84;
    filter: saturate(.84) contrast(.96) brightness(.99);
}
body.ce-site li.product.outofstock .ce-card-body {
    opacity: .88;
}
body.ce-site li.product.outofstock .ce-card-media::after {
    content: "ИЗЧЕРПАН";
    position: absolute;
    z-index: 7;
    top: 21px;
    right: -25px;
    width: 136px;
    padding: 4px 0 5px;
    box-sizing: border-box;
    background: rgba(225, 57, 105, .68);
    color: #fff;
    box-shadow: none;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: .025em;
    text-align: center;
    text-shadow: 0 1px 1px rgba(79, 27, 45, .24);
    white-space: nowrap;
    transform: rotate(45deg);
    pointer-events: none;
}

/* Single product: one continuous diagonal band WITH the text on the same
 * rotated element.  Both physical ends extend outside the clipping image.
 * This prevents the text drifting away from a separate polygon as in 17.5.16.
 * The band crosses the top and right borders, away from the zoom control.
 */
body.ce-site.single-product div.product.outofstock .woocommerce-product-gallery__image {
    position: relative;
    overflow: hidden;
    background: #f3f6f4;
    --ce-sold-band: 42px;        /* visible band thickness */
    --ce-sold-width: 350px;      /* extends outside both edges */
    --ce-sold-top: 79px;        /* center of band falls on the corner diagonal */
    --ce-sold-right: -75px;
}
body.ce-site.single-product div.product.outofstock .woocommerce-product-gallery__image img {
    opacity: .87;
    filter: saturate(.87) contrast(.97);
}
/* Remove the old polygon. The after element paints both band AND label. */
body.ce-site.single-product div.product.outofstock .woocommerce-product-gallery__image::before {
    content: none;
}
body.ce-site.single-product div.product.outofstock .woocommerce-product-gallery__image::after {
    content: "ИЗЧЕРПАН";
    position: absolute;
    z-index: 8;
    top: var(--ce-sold-top);
    right: var(--ce-sold-right);
    width: var(--ce-sold-width);
    height: var(--ce-sold-band);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    background: rgba(225, 57, 105, .68);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .025em;
    text-align: center;
    text-shadow: 0 1px 1px rgba(79, 27, 45, .24);
    white-space: nowrap;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    pointer-events: none;
}

/* Smaller image gallery on mobile. The clipping and central alignment remain
 * correct even at 320px viewport width. The catalog card labels are unchanged. */
@media (max-width: 650px) {
    body.ce-site li.product.outofstock .ce-card-media::after {
        top: 16px;
        right: -20px;
        width: 112px;
        padding: 3px 0 4px;
        font-size: 9px;
        letter-spacing: .008em;
    }
    body.ce-site.single-product div.product.outofstock .woocommerce-product-gallery__image {
        --ce-sold-band: 31px;
        --ce-sold-width: 250px;
        --ce-sold-top: 52.5px;
        --ce-sold-right: -57px;
    }
    body.ce-site.single-product div.product.outofstock .woocommerce-product-gallery__image::after {
        font-size: 10px;
    }
}