/**
 * Petka Product Badges
 *
 * Sizes are relative to the image: the badge layer is a size container, so 1cqw is 1 % of
 * the picture's width, and --pbdg-size / --pbdg-offset / --pbdg-gap are in those units.
 * Colours come per badge as --pbdg-bg / --pbdg-fg.
 */

.pbdg-host {
    position: relative;
}

/* The badges sit inside the image wrapper, which is exactly as tall as the picture. An
   inline image leaves a few pixels under its baseline there; without those a badge at the
   bottom really rests on the lower edge of the picture. */
.pbdg-host--img > img,
.pbdg-host--img > .product-image-photo {
    vertical-align: top;
}

.pbdg-host--wrap {
    display: inline-block;
    max-width: 100%;
}

.product.media {
    position: relative;
}

/* ------------------------------------------------------------------ layer */

.pbdg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    container-type: inline-size;
    pointer-events: none;
}

.pbdg-stack {
    --pbdg-s: calc(var(--pbdg-size, 30) * 1cqw);
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--pbdg-gap, 2) * 1cqw);
    box-sizing: border-box;
    padding: calc(var(--pbdg-offset, 4) * 1cqw);
    line-height: 1.05;
}

/* Over the gallery the layer is as tall as it is wide: the usual square product photo. */
.pbdg-layer--gallery {
    bottom: auto;
    aspect-ratio: 1 / 1;
    z-index: 5;
}

.pbdg-pos--top-right .pbdg-stack { align-items: flex-end; justify-content: flex-start; }
.pbdg-pos--top-left .pbdg-stack { align-items: flex-start; justify-content: flex-start; }
.pbdg-pos--bottom-right .pbdg-stack { align-items: flex-end; justify-content: flex-end; }
.pbdg-pos--bottom-left .pbdg-stack { align-items: flex-start; justify-content: flex-end; }

/* ------------------------------------------------------------------ badge base */

.pbdg {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--pbdg-bg, #e53935);
    color: var(--pbdg-fg, #ffffff);
    font-weight: var(--pbdg-weight, 700);
    text-align: center;
    overflow-wrap: break-word;
    hyphens: auto;
}

.pbdg-upper .pbdg {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pbdg__text {
    display: block;
    max-width: 100%;
}

/* Round and shaped badges: a square box as wide as --pbdg-size. */
.pbdg--circle, .pbdg--ring, .pbdg--outline, .pbdg--sticker,
.pbdg--burst, .pbdg--seal, .pbdg--hexagon, .pbdg--neon {
    width: var(--pbdg-s);
    height: var(--pbdg-s);
    padding: calc(var(--pbdg-s) * 0.12);
    font-size: calc(var(--pbdg-s) * 0.17);
}

/* Labels: a third as tall, as wide as the text. */
.pbdg--pill, .pbdg--tag, .pbdg--square {
    height: calc(var(--pbdg-s) * 0.34);
    max-width: 100%;
    padding: 0 calc(var(--pbdg-s) * 0.16);
    font-size: calc(var(--pbdg-s) * 0.15);
    white-space: nowrap;
}

.pbdg--pill .pbdg__text, .pbdg--tag .pbdg__text, .pbdg--square .pbdg__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 1. Flat circle */
.pbdg--circle {
    border-radius: 50%;
}

/* 2. Circle with a white ring and a soft shadow */
.pbdg--ring {
    border-radius: 50%;
    box-shadow: 0 0 0 calc(var(--pbdg-s) * 0.045) #ffffff, 0 calc(var(--pbdg-s) * 0.05) calc(var(--pbdg-s) * 0.14) rgba(0, 0, 0, 0.22);
}

/* 3. Outline circle - the badge colour is the ring and the text */
.pbdg--outline {
    border: calc(var(--pbdg-s) * 0.055) solid var(--pbdg-bg, #e53935);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--pbdg-bg, #e53935);
}

/* 4. Glossy sticker, slightly tilted, with a stitched edge */
.pbdg--sticker {
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
        var(--pbdg-bg, #e53935);
    outline: calc(var(--pbdg-s) * 0.018) dashed rgba(255, 255, 255, 0.7);
    outline-offset: calc(var(--pbdg-s) * -0.075);
    box-shadow: 0 calc(var(--pbdg-s) * 0.06) calc(var(--pbdg-s) * 0.16) rgba(0, 0, 0, 0.28);
    transform: rotate(-12deg);
}

/* 5. Starburst */
.pbdg--burst {
    padding: calc(var(--pbdg-s) * 0.2);
    clip-path: polygon(50.0% 0.0%, 57.6% 11.7%, 69.1% 3.8%, 71.7% 17.6%, 85.4% 14.6%, 82.4% 28.3%, 96.2% 30.9%, 88.3% 42.4%, 100.0% 50.0%, 88.3% 57.6%, 96.2% 69.1%, 82.4% 71.7%, 85.4% 85.4%, 71.7% 82.4%, 69.1% 96.2%, 57.6% 88.3%, 50.0% 100.0%, 42.4% 88.3%, 30.9% 96.2%, 28.3% 82.4%, 14.6% 85.4%, 17.6% 71.7%, 3.8% 69.1%, 11.7% 57.6%, 0.0% 50.0%, 11.7% 42.4%, 3.8% 30.9%, 17.6% 28.3%, 14.6% 14.6%, 28.3% 17.6%, 30.9% 3.8%, 42.4% 11.7%);
}

/* 6. Seal - a scalloped round edge */
.pbdg--seal {
    padding: calc(var(--pbdg-s) * 0.16);
    clip-path: polygon(50.0% 0.0%, 55.9% 5.4%, 62.9% 1.7%, 67.2% 8.4%, 75.0% 6.7%, 77.4% 14.3%, 85.4% 14.6%, 85.7% 22.6%, 93.3% 25.0%, 91.6% 32.8%, 98.3% 37.1%, 94.6% 44.1%, 100.0% 50.0%, 94.6% 55.9%, 98.3% 62.9%, 91.6% 67.2%, 93.3% 75.0%, 85.7% 77.4%, 85.4% 85.4%, 77.4% 85.7%, 75.0% 93.3%, 67.2% 91.6%, 62.9% 98.3%, 55.9% 94.6%, 50.0% 100.0%, 44.1% 94.6%, 37.1% 98.3%, 32.8% 91.6%, 25.0% 93.3%, 22.6% 85.7%, 14.6% 85.4%, 14.3% 77.4%, 6.7% 75.0%, 8.4% 67.2%, 1.7% 62.9%, 5.4% 55.9%, 0.0% 50.0%, 5.4% 44.1%, 1.7% 37.1%, 8.4% 32.8%, 6.7% 25.0%, 14.3% 22.6%, 14.6% 14.6%, 22.6% 14.3%, 25.0% 6.7%, 32.8% 8.4%, 37.1% 1.7%, 44.1% 5.4%);
}

/* 7. Hexagon */
.pbdg--hexagon {
    padding: calc(var(--pbdg-s) * 0.14) calc(var(--pbdg-s) * 0.2);
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
}

/* 8. Neon - glowing and gently pulsing */
.pbdg--neon {
    border-radius: 50%;
    box-shadow:
        0 0 calc(var(--pbdg-s) * 0.1) var(--pbdg-bg, #e53935),
        0 0 calc(var(--pbdg-s) * 0.3) color-mix(in srgb, var(--pbdg-bg, #e53935) 65%, transparent);
    text-shadow: 0 0 calc(var(--pbdg-s) * 0.06) rgba(255, 255, 255, 0.85);
    animation: pbdg-neon 2.4s ease-in-out infinite;
}

@keyframes pbdg-neon {
    0%, 100% { box-shadow: 0 0 calc(var(--pbdg-s) * 0.08) var(--pbdg-bg, #e53935), 0 0 calc(var(--pbdg-s) * 0.22) color-mix(in srgb, var(--pbdg-bg, #e53935) 55%, transparent); }
    50% { box-shadow: 0 0 calc(var(--pbdg-s) * 0.14) var(--pbdg-bg, #e53935), 0 0 calc(var(--pbdg-s) * 0.4) color-mix(in srgb, var(--pbdg-bg, #e53935) 75%, transparent); }
}

/* 9. Pill label */
.pbdg--pill {
    border-radius: 999px;
    box-shadow: 0 calc(var(--pbdg-s) * 0.03) calc(var(--pbdg-s) * 0.08) rgba(0, 0, 0, 0.14);
}

/* 10. Price tag: pointed end with a punched hole */
.pbdg--tag {
    position: relative;
    padding-left: calc(var(--pbdg-s) * 0.26);
    border-radius: 0 calc(var(--pbdg-s) * 0.04) calc(var(--pbdg-s) * 0.04) 0;
    clip-path: polygon(calc(var(--pbdg-s) * 0.13) 0, 100% 0, 100% 100%, calc(var(--pbdg-s) * 0.13) 100%, 0 50%);
}

.pbdg--tag::before {
    content: '';
    position: absolute;
    left: calc(var(--pbdg-s) * 0.1);
    top: 50%;
    width: calc(var(--pbdg-s) * 0.05);
    height: calc(var(--pbdg-s) * 0.05);
    border-radius: 50%;
    background: #ffffff;
    transform: translateY(-50%);
}

/* 11. Square label */
.pbdg--square {
    border-radius: calc(var(--pbdg-s) * 0.02);
    letter-spacing: 0.04em;
}

/* 12. Corner quarter circle - sits flush in the corner of the picture.
   13. Half circle - a half disc leaning against the nearest edge.
   Both cancel the stack padding on the sides that touch the edge, so they really do reach
   into the corner; the shape follows the badge position setting. */
.pbdg--corner, .pbdg--halfcircle {
    --pbdg-bleed: calc(var(--pbdg-offset, 4) * -1cqw);
    /* As wide as the badge size, and wider when the text asks for it: a word like
       "Razprodaja" has to stay inside the shape, so the shape grows with it. */
    min-width: var(--pbdg-s);
    max-width: 92%;
    font-size: calc(var(--pbdg-s) * 0.16);
    white-space: nowrap;
    box-shadow: 0 calc(var(--pbdg-s) * 0.02) calc(var(--pbdg-s) * 0.08) rgba(0, 0, 0, 0.18);
}

.pbdg--corner {
    height: var(--pbdg-s);
    /* Default (top right): flat along the top and the right, round towards the picture. */
    border-radius: 0 0 0 100%;
    padding: calc(var(--pbdg-s) * 0.1) calc(var(--pbdg-s) * 0.1) calc(var(--pbdg-s) * 0.36) calc(var(--pbdg-s) * 0.36);
    margin-top: var(--pbdg-bleed);
    margin-right: var(--pbdg-bleed);
}

.pbdg-pos--top-left .pbdg--corner {
    border-radius: 0 0 100% 0;
    padding: calc(var(--pbdg-s) * 0.1) calc(var(--pbdg-s) * 0.36) calc(var(--pbdg-s) * 0.36) calc(var(--pbdg-s) * 0.1);
    margin-right: 0;
    margin-left: var(--pbdg-bleed);
}

.pbdg-pos--bottom-right .pbdg--corner {
    border-radius: 100% 0 0 0;
    padding: calc(var(--pbdg-s) * 0.36) calc(var(--pbdg-s) * 0.1) calc(var(--pbdg-s) * 0.1) calc(var(--pbdg-s) * 0.36);
    margin-top: 0;
    margin-bottom: var(--pbdg-bleed);
}

.pbdg-pos--bottom-left .pbdg--corner {
    border-radius: 0 100% 0 0;
    padding: calc(var(--pbdg-s) * 0.36) calc(var(--pbdg-s) * 0.36) calc(var(--pbdg-s) * 0.1) calc(var(--pbdg-s) * 0.1);
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--pbdg-bleed);
    margin-left: var(--pbdg-bleed);
}

.pbdg--halfcircle {
    height: calc(var(--pbdg-s) * 0.5);
    /* Default (top): flat side against the upper edge, round side down. */
    border-radius: 0 0 var(--pbdg-s) var(--pbdg-s);
    padding: 0 calc(var(--pbdg-s) * 0.22) calc(var(--pbdg-s) * 0.06);
    margin-top: var(--pbdg-bleed);
}

.pbdg-pos--bottom-right .pbdg--halfcircle,
.pbdg-pos--bottom-left .pbdg--halfcircle {
    border-radius: var(--pbdg-s) var(--pbdg-s) 0 0;
    padding: calc(var(--pbdg-s) * 0.06) calc(var(--pbdg-s) * 0.22) 0;
    margin-top: 0;
    margin-bottom: var(--pbdg-bleed);
}

.pbdg--corner .pbdg__text, .pbdg--halfcircle .pbdg__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
    .pbdg--neon {
        animation: none;
    }
}