/* Styles for product discount sticker */
.product-image-wrapper {
    position: relative;
    display: inline-block;
    /* allow positioned ribbons to extend outside the image without being clipped */
    overflow: visible;
}

/* Some slider/carousel libraries set overflow:hidden on their containers. Make sure
   common slider parent classes allow the ribbon to be visible. Use !important to
   override plugin styles if needed. */
.single-pro-slider .product-image-wrapper, .single-big-photo .product-image-wrapper {
    /* keep overflow visible only on the product-image-wrapper inside known slider containers
       to minimize side effects from forcing overflow on broad plugin containers */
    overflow: visible !important;
}

.product-discount-sticker {
    /* legacy small rectangular sticker kept for narrow layouts */
    position: absolute;
    top: 10px;
    left: 10px;
    background: #d32f2f; /* red */
    color: #fff;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 3px;
    z-index: 999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Slightly smaller sticker for very small images */
@media (max-width: 576px) {
    .product-discount-sticker {
        top: 6px;
        left: 6px;
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

/* Ensure price inside product-info appears under the title and not absolutely positioned */
.product-info .pro-price-2 {
    position: static !important;
    right: auto !important;
    top: auto !important;
    display: block;
    margin-top: 6px;
    color: #7DC4ee; /* keep original color */
}

/* Small tweak: center price under title when using text-center on product-info */
.product-info.text-center .pro-price-2 {
    text-align: center;
}

/* Price styling for discount display */
.old-price {
    text-decoration: line-through;
    color: #999;
    margin-right: 6px;
    font-weight: 600;
}

.new-price {
    color: #d32f2f;
    font-weight: 800;
    margin-left: 4px;
}

/* Use same rectangular sticker in detail view as thumbnails (no diagonal ribbon) */
.product-ribbon, .product-discount-sticker {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #d32f2f; /* red */
    color: #fff;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 3px;
    z-index: 999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
}

@media (max-width: 576px) {
    .product-ribbon, .product-discount-sticker {
        top: 6px;
        left: 6px;
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

/* Hover magnifier overlay for product images */
.product-image-wrapper a {
    position: relative; /* anchor will be positioned so overlay can be absolute inside it */
    display: inline-block;
}

.product-image-wrapper .img-hover-icon {
    position: absolute;
    inset: 0; /* stretch to anchor bounds */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* allow clicks to pass through to the link */
    opacity: 0;
    transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
    transform: scale(0.9);
    z-index: 995;
}

.product-image-wrapper .img-hover-icon i {
    font-size: 28px;
    color: rgba(255,255,255,0.95);
    background: rgba(0,0,0,0.45);
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.product-image-wrapper a:hover .img-hover-icon,
.product-image-wrapper a:focus .img-hover-icon {
    opacity: 1;
    transform: scale(1);
}

/* Slightly smaller icon for thumbnails / small images */
.single-pro-slider .product-image-wrapper .img-hover-icon i,
.single-sml-photo .product-image-wrapper .img-hover-icon i {
    font-size: 20px;
    padding: 8px;
}