.badge-overlay {
position: absolute;
left: 0%;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 10;
-webkit-transition: width 1s ease, height 1s ease;
-moz-transition: width 1s ease, height 1s ease;
-o-transition: width 1s ease, height 1s ease;
transition: width 0.4s ease, height 0.4s ease
}
.badge {
margin: 0;
padding: 0;
color: #FFF;
padding: 10px 10px;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
line-height: normal;
text-transform: uppercase;
background: #333;
}
.badge.badge-shape-rounded {
border-radius: 18px;
}
.badge.badge-shape-pill {
border-radius: 999px;
}
.badge.badge-shape-circle {
min-width: 72px;
min-height: 72px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 10px;
}
.badge.badge-shape-diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
padding: 18px 20px;
}
.badge.badge-shape-diamond::before,
.badge.badge-shape-diamond::after {
display: none;
}
.badge.badge-shape-star {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
padding: 22px 18px;
}
.badge.badge-shape-hexagon {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
padding: 16px 20px;
}
.badge.badge-shape-ticket {
clip-path: polygon(0 0, 100% 0, 100% 28%, 92% 36%, 100% 44%, 100% 100%, 0 100%, 0 44%, 8% 36%, 0 28%);
padding: 14px 18px;
}
.badge.badge-shape-bookmark {
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
padding: 12px 16px 18px;
}
.badge.badge-shape-burst {
clip-path: polygon(50% 0%, 62% 12%, 78% 4%, 82% 20%, 98% 18%, 90% 34%, 100% 50%, 90% 66%, 98% 82%, 82% 80%, 78% 96%, 62% 88%, 50% 100%, 38% 88%, 22% 96%, 18% 80%, 2% 82%, 10% 66%, 0% 50%, 10% 34%, 2% 18%, 18% 20%, 22% 4%, 38% 12%);
padding: 20px 18px;
}
.badge.badge-shape-circle::before,
.badge.badge-shape-circle::after,
.badge.badge-shape-diamond::before,
.badge.badge-shape-diamond::after,
.badge.badge-shape-star::before,
.badge.badge-shape-star::after,
.badge.badge-shape-hexagon::before,
.badge.badge-shape-hexagon::after,
.badge.badge-shape-ticket::before,
.badge.badge-shape-ticket::after,
.badge.badge-shape-bookmark::before,
.badge.badge-shape-bookmark::after,
.badge.badge-shape-burst::before,
.badge.badge-shape-burst::after {
display: none;
}
.badge:not(.left):not(.right)::before, .badge:not(.left):not(.right)::after {
content: '';
position: absolute;
top: 0;
margin: 0 -1px;
width: 100%;
height: 100%;
background: inherit;
min-width: 55px
}
.badge::before {
right: 100%
}
.badge::after {
left: 100%
} .badge.left-top {
position: absolute;
top: 0;
left: 0;
-ms-transform: translateX(-30%) translateY(0%) rotate(-45deg);
-webkit-transform: translateX(-30%) translateY(0%) rotate(-45deg);
transform: translateX(-30%) translateY(0%) rotate(-45deg);
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
}
.badge.right-top {
position: absolute;
top: 0;
right: 0;
-ms-transform: translateX(30%) translateY(0%) rotate(45deg);
-webkit-transform: translateX(30%) translateY(0%) rotate(45deg);
transform: translateX(30%) translateY(0%) rotate(45deg);
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.badge.left-bottom {
position: absolute;
bottom: 0;
left: 0;
-ms-transform: translateX(-30%) translateY(0%) rotate(45deg);
-webkit-transform: translateX(-30%) translateY(0%) rotate(45deg);
transform: translateX(-30%) translateY(0%) rotate(45deg);
-ms-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.badge.right-bottom {
position: absolute;
bottom: 0;
right: 0;
-ms-transform: translateX(30%) translateY(0%) rotate(-45deg);
-webkit-transform: translateX(30%) translateY(0%) rotate(-45deg);
transform: translateX(30%) translateY(0%) rotate(-45deg);
-ms-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.badge.top {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.badge.top-left {
position: absolute;
top: 12px;
left: 12px;
}
.badge.top-right {
position: absolute;
top: 12px;
right: 12px;
}
.badge.center {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
-ms-transform: translateX(0%) translateY(-50%) rotate(0deg);
-webkit-transform: translateX(0%) translateY(-50%) rotate(0deg);
transform: translateX(0%) translateY(-50%) rotate(0deg);
}
.badge.center-left {
position: absolute;
top: 50%;
left: 12px;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.badge.center-right {
position: absolute;
top: 50%;
right: 12px;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.badge.bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
.badge.bottom-left {
position: absolute;
bottom: 12px;
left: 12px;
}
.badge.bottom-right {
position: absolute;
bottom: 12px;
right: 12px;
}
.badge.left {
position: absolute;
top: 0;
left: 0;
width: 38px;
height: 100%;
text-align: center;
writing-mode: vertical-lr;
}
.badge.right {
position: absolute;
top: 0;
right: 0;
width: 38px;
height: 100%;
text-align: center;
writing-mode: vertical-lr;
} body.theme-astra.woocommerce div.product div.images .with-badges:first-child .woocommerce-product-gallery__image:nth-child(n+2) {
width: auto;
} .woocommerce-mini-cart .badge-position, .widget_recently_viewed_products .badge-position {
position: unset !important;
}
.woocommerce-mini-cart .badge-position .badge-overlay, .widget_recently_viewed_products .badge-position .badge-overlay {
display: none;
}