/* ensure proper positioning */
.woocommerce ul.products li.product,
.woocommerce div.product div.images,
.woocommerce div.product div.woocommerce-product-gallery{
    position: relative;
}


/* MAIN RIBBON */
.woocommerce span.ysp-sale-ribbon{
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 9;

    background: #d0ae46;
    color: #ffffff;

    padding: 10px 18px 10px 16px;

    font-weight: 800;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;

    border-radius: 14px;

    border: 3px solid #ffffff;

    box-shadow:
        0 12px 22px rgba(0,0,0,.18),
        inset 0 -2px 0 rgba(0,0,0,.15);

    transform: none !important;
    overflow: hidden; /* needed for shine */
}


/* SUBTLE SHINE ANIMATION */
.woocommerce span.ysp-sale-ribbon:after{
    content: "";
    position: absolute;
    top: -40%;
    left: -60%;

    width: 55%;
    height: 180%;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.22) 40%,
        rgba(255,255,255,.40) 50%,
        rgba(255,255,255,.22) 60%,
        rgba(255,255,255,0) 100%
    );

    transform: rotate(20deg);
    animation: yspRibbonShine 3.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes yspRibbonShine{
    0%   { left: -70%; opacity: 0; }
    15%  { opacity: 1; }
    35%  { left: 120%; opacity: .9; }
    50%  { opacity: 0; }
    100% { left: 120%; opacity: 0; }
}