/**
 * Frontend Single Product Overrides
 *
 * @since 1.2.0
 */

/* ── Reduce product image height on single product page ── */
.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    max-height: 500px;
    width: auto;
    object-fit: contain;
}

.woocommerce-product-gallery__image img {
    display: block;
    margin: 0 auto;
}

div#sticky-images {
    border: 1px solid #8080804a;
    border-radius: 10px;
    overflow: hidden;
    padding: 0 !important;
    box-shadow: 2px 1px 6px 0px #00000012;
}


.woocommerce-product-gallery__image {
    position: relative;
    overflow: hidden;
    background: #f4f4f4; /* fallback */
}

/* Blurred backdrop — duplicates the product image behind itself */
.woocommerce-product-gallery__image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--product-img);
    background-size: cover;
    background-position: center;
    filter: blur(30px) saturate(1.2);
    transform: scale(1.5);   /* hides the soft edges the blur creates */
    z-index: 0;
    opacity: 0.3;
}

/* Keep the real image on top, centered */
.woocommerce-product-gallery__image img {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    width: auto;
}

.woocommerce span.onsale {
    z-index: 5;
}