/* Anchors for the overlay: block image wrapper and classic loop items. */
.wc-block-components-product-image,
.wc-block-grid__product-image,
li.product { position: relative; }

.jqb-badge {
    position: absolute;
    z-index: var( --jqb-z, 5 );
    opacity: var( --jqb-o, 1 );
    pointer-events: none;
    box-sizing: border-box;
    rotate: var( --jqb-r, 0deg );
    display: inline-block;
    max-width: 90%;
}

.jqb-p-top-left      { top: var( --jqb-y ); left: var( --jqb-x ); transform-origin: top left; }
.jqb-p-top-center    { top: var( --jqb-y ); left: 50%; transform: translateX( calc( -50% + var( --jqb-x ) ) ); transform-origin: top center; }
.jqb-p-top-right     { top: var( --jqb-y ); right: var( --jqb-x ); transform-origin: top right; }
.jqb-p-middle-left   { top: 50%; left: var( --jqb-x ); transform: translateY( calc( -50% + var( --jqb-y ) ) ); transform-origin: center left; }
.jqb-p-center        { top: 50%; left: 50%; transform: translate( calc( -50% + var( --jqb-x ) ), calc( -50% + var( --jqb-y ) ) ); }
.jqb-p-middle-right  { top: 50%; right: var( --jqb-x ); transform: translateY( calc( -50% + var( --jqb-y ) ) ); transform-origin: center right; }
.jqb-p-bottom-left   { bottom: var( --jqb-y ); left: var( --jqb-x ); transform-origin: bottom left; }
.jqb-p-bottom-center { bottom: var( --jqb-y ); left: 50%; transform: translateX( calc( -50% + var( --jqb-x ) ) ); transform-origin: bottom center; }
.jqb-p-bottom-right  { bottom: var( --jqb-y ); right: var( --jqb-x ); transform-origin: bottom right; }

@media ( max-width: 768px ) {
    .jqb-badge { scale: var( --jqb-ms, 1 ); }
}