.cenesti-pb-host {
    position: relative !important;
}

.cenesti-product-badges {
    position: absolute;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: calc(100% - var(--cenesti-pb-offset-x, 14px) - var(--cenesti-pb-offset-x, 14px));
    max-width: calc(100% - var(--cenesti-pb-offset-x, 14px) - var(--cenesti-pb-offset-x, 14px));
    pointer-events: none;
}

.cenesti-product-badges--bottom-left,
.cenesti-product-badges--top-left {
    left: var(--cenesti-pb-offset-x, 14px);
    align-items: flex-start;
}

.cenesti-product-badges--bottom-right,
.cenesti-product-badges--top-right {
    right: var(--cenesti-pb-offset-x, 14px);
    align-items: flex-end;
}

.cenesti-product-badges--bottom-left,
.cenesti-product-badges--bottom-right {
    bottom: var(--cenesti-pb-offset-y, 14px);
}

.cenesti-product-badges--top-left,
.cenesti-product-badges--top-right {
    top: var(--cenesti-pb-offset-y, 14px);
}

.cenesti-product-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--cenesti-pb-padding-y, 6px) var(--cenesti-pb-padding-x, 11px);
    border: 1px solid var(--cenesti-pb-border, #9b8d85);
    border-radius: var(--cenesti-pb-radius, 3px);
    color: var(--cenesti-pb-text, #fff);
    background: var(--cenesti-pb-bg, #9b8d85);
    font-family: "Poppins", sans-serif;
    font-size: var(--cenesti-pb-font-size, 10.5px);
    font-weight: var(--cenesti-pb-font-weight, 500);
    line-height: 1.25;
    letter-spacing: 0;
    white-space: normal;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    opacity: 1;
    visibility: visible;
    transition: opacity .15s ease, visibility .15s ease;
}

.cenesti-product-badge--soft {
    background: color-mix(in srgb, var(--cenesti-pb-bg, #faf8f7) 18%, white);
}

.cenesti-product-badge--outline {
    background: rgba(255, 255, 255, .94);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
    .cenesti-product-badge--soft {
        background: var(--cenesti-pb-bg, #faf8f7);
    }
}

/* Ukrywanie badge’a działa także na urządzeniach dotykowych.
   Klasa touch-active jest ustawiana przez JS po dotknięciu kafelka. */
li.product:hover .cenesti-product-badge--hide-on-hover,
.product:hover .cenesti-product-badge--hide-on-hover,
.jws_products_item:hover .cenesti-product-badge--hide-on-hover,
.jws-product-item:hover .cenesti-product-badge--hide-on-hover,
.cenesti-pb-host:hover .cenesti-product-badge--hide-on-hover,
li.product:focus-within .cenesti-product-badge--hide-on-hover,
.product:focus-within .cenesti-product-badge--hide-on-hover,
.jws_products_item:focus-within .cenesti-product-badge--hide-on-hover,
.jws-product-item:focus-within .cenesti-product-badge--hide-on-hover,
li.product.cenesti-pb-touch-active .cenesti-product-badge--hide-on-hover,
.product.cenesti-pb-touch-active .cenesti-product-badge--hide-on-hover,
.jws_products_item.cenesti-pb-touch-active .cenesti-product-badge--hide-on-hover,
.jws-product-item.cenesti-pb-touch-active .cenesti-product-badge--hide-on-hover {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 768px) {
    .cenesti-product-badges {
        gap: 4px;
        width: calc(100% - var(--cenesti-pb-mobile-offset-x, var(--cenesti-pb-offset-x, 8px)) - var(--cenesti-pb-mobile-offset-x, var(--cenesti-pb-offset-x, 8px)));
        max-width: calc(100% - var(--cenesti-pb-mobile-offset-x, var(--cenesti-pb-offset-x, 8px)) - var(--cenesti-pb-mobile-offset-x, var(--cenesti-pb-offset-x, 8px)));
    }

    .cenesti-product-badges--bottom-left,
    .cenesti-product-badges--top-left {
        left: var(--cenesti-pb-mobile-offset-x, var(--cenesti-pb-offset-x, 8px));
        right: auto;
    }

    .cenesti-product-badges--bottom-right,
    .cenesti-product-badges--top-right {
        right: var(--cenesti-pb-mobile-offset-x, var(--cenesti-pb-offset-x, 8px));
        left: auto;
    }

    .cenesti-product-badges--bottom-left,
    .cenesti-product-badges--bottom-right {
        bottom: var(--cenesti-pb-mobile-offset-y, var(--cenesti-pb-offset-y, 8px));
        top: auto;
    }

    .cenesti-product-badges--top-left,
    .cenesti-product-badges--top-right {
        top: var(--cenesti-pb-mobile-offset-y, var(--cenesti-pb-offset-y, 8px));
        bottom: auto;
    }

    .cenesti-product-badge {
        font-size: var(--cenesti-pb-mobile-font-size, 9.5px);
    }
}

/* Single product: nieruchoma warstwa jest dopasowywana przez JS do ramki głównego zdjęcia.
   Nie jest dzieckiem skalowanego slajdu/IMG, więc nie porusza się podczas zoomu. */
.cenesti-pb-gallery-host {
    position: relative !important;
}

.cenesti-pb-single-image-host {
    position: absolute;
    z-index: 42;
    display: block;
    box-sizing: border-box;
    pointer-events: none;
    overflow: visible;
}

.cenesti-pb-single-image-host[hidden] {
    display: none !important;
}

.cenesti-pb-single-direct-host {
    overflow: visible;
}

/* Single product: badge jest domyślnie niewidoczny i pokazuje się dopiero,
   gdy JS potwierdzi, że główne zdjęcie jest wczytane, stabilne i skeleton zniknął. */
.cenesti-product-badges--single {
    opacity: 0;
    visibility: hidden;
    transition: none;
}

.cenesti-product-badges--single.cenesti-pb-is-ready {
    opacity: 1;
    visibility: visible;
    transition: opacity .14s ease;
}