/* WW Labels Frontend Style */

.ww-label-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

.woocommerce ul.products li.product .ww-label-wrapper {
    display: block;
    width: 100%;
}

.ww-label-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

/* Badge styling */
.ww-product-label {
    position: absolute;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    padding: 5px 12px 5px 8px;
    z-index: 5;
    pointer-events: none;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Badge Positions */
.ww-label-bottom-left {
    bottom: 8px;
    left: 0;
}
.ww-label-top-left {
    top: 8px;
    left: 0;
}
.ww-label-bottom-right {
    bottom: 8px;
    right: 0;
    padding: 5px 8px 5px 12px;
}
.ww-label-top-right {
    top: 8px;
    right: 0;
    padding: 5px 8px 5px 12px;
}

/* Badge Shapes (Left side / default) */
.ww-label-slant-forward.ww-label-bottom-left,
.ww-label-slant-forward.ww-label-top-left {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
.ww-label-slant-backward.ww-label-bottom-left,
.ww-label-slant-backward.ww-label-top-left {
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.ww-label-chevron.ww-label-bottom-left,
.ww-label-chevron.ww-label-top-left {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

/* Badge Shapes (Right side) */
.ww-label-slant-forward.ww-label-bottom-right,
.ww-label-slant-forward.ww-label-top-right {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
}
.ww-label-slant-backward.ww-label-bottom-right,
.ww-label-slant-backward.ww-label-top-right {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%);
}
.ww-label-chevron.ww-label-bottom-right,
.ww-label-chevron.ww-label-top-right {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}

/* Non-clip-path shapes */
.ww-label-rectangle {
    clip-path: none !important;
}
.ww-label-rounded {
    clip-path: none !important;
    border-radius: 4px;
}
.ww-label-pill {
    clip-path: none !important;
    border-radius: 9999px;
}

/* Positions with margins for rounded/pill shapes to look neat */
.ww-label-rounded.ww-label-bottom-left, .ww-label-pill.ww-label-bottom-left { left: 8px; }
.ww-label-rounded.ww-label-top-left, .ww-label-pill.ww-label-top-left { left: 8px; }
.ww-label-rounded.ww-label-bottom-right, .ww-label-pill.ww-label-bottom-right { right: 8px; padding: 5px 8px; }
.ww-label-rounded.ww-label-top-right, .ww-label-pill.ww-label-top-right { right: 8px; padding: 5px 8px; }