/* customizari vetter */

/* begin - vetter custom tooltips */
[data-tooltip-vetter] {
    /* misc styles */
    font-weight:bold;
    cursor:pointer;

    /* require position:relative because the tooltip is position:absolute */
    position:relative;
    display:inline-block;
}

[data-tooltip-vetter]::after {
    /* set up our positioning */
    position:absolute;
    top:50%;
    /*left:50%;
    transform:translateX(-50%);*/
    left: 0;

    /* use attr mixed with content to pull the attribute into the world */
    content: attr(data-tooltip-vetter);

    /* misc colors, styling */
    background:#0074C89E;
    color:#fff;
    font-size:0.65rem;
    padding:.3rem .5rem;
    text-align:center;
    border-radius:3px;
    opacity:0;
    min-width: min(60vw, 200px);
    height: 60%; overflow: hidden;

    /* set transitions so it's not instant */
    transition:top .2s ease-out, opacity .2s ease-out;
}

[data-tooltip-vetter]:hover::after {
    /* on hover, move tooltip to under the element and make it visible */
    top:100%;
    opacity:1;
    height: auto;
    backdrop-filter: blur(10px);
 }

/* fix for product details page */
main .product-summary__image-badges {
    z-index: 2;
}

main .grid-image__badges--left,
main .grid-image__badges--left .grid-image__badge--price-discount {
    z-index: 3;
}

main .product-summary__image-badges--left,
main .product-summary__image-badges--left .product-summary__badge--price-discount {
    z-index: 3;
}

/* fix for price discount tooltip */
.grid-image__badge--price-discount[data-tooltip-vetter]::after {
    content: 'Discount: ' attr(data-tooltip-vetter);
    min-width: min(40vw, 100px);
}

main .product-summary__badge--price-discount[data-tooltip-vetter]::after {
    content: 'Discount: ' attr(data-tooltip-vetter);
    min-width: min(40vw, 100px);
}


/* end - vetter custom tooltips */