/* SR Product Ribbon — ribbon.css v9 */


.sr-ribbon-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    line-height: 0;
    vertical-align: top;
    overflow: hidden;
}

.sr-ribbon-wrap > a,
.sr-ribbon-wrap > span,
.sr-ribbon-wrap .woocommerce-product-gallery__image,
.sr-ribbon-wrap .wp-post-image,
.sr-ribbon-wrap img {
    max-width: 100%;
}

.sr-ribbon-wrap img {
    display: block;
}


.sr-ribbon-single-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 99;
    overflow: hidden;
}

/* ── DIJAGONALNA ─────────────────────────────────────── */
.sr-ribbon.sr-shape--diagonal {
    position: absolute;
    width: 150px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    z-index: 99;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

/* Gore desno: levi špic >, desni uvučen < ] */
.sr-ribbon.sr-shape--diagonal.sr-corner--right {
    top: 24px;
    right: -40px;
    transform: rotate(45deg);
    clip-path: polygon(0% 50%, 10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%);
}

/* Gore levo: levi kraj ravan [, desni špic < */
.sr-ribbon.sr-shape--diagonal.sr-corner--left {
    top: 24px;
    left: -40px;
    transform: rotate(-45deg);
    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
}

/* Single — veća */
.sr-ribbon-single-wrap .sr-ribbon.sr-shape--diagonal {
    width: 170px;
    height: 24px;
    line-height: 24px;
    font-size: 11px;
}
.sr-ribbon-single-wrap .sr-ribbon.sr-shape--diagonal.sr-corner--right {
    top: 28px;
    right: -44px;
}
.sr-ribbon-single-wrap .sr-ribbon.sr-shape--diagonal.sr-corner--left {
    top: 28px;
    left: -44px;
}

/* ── HORIZONTALNA ────────────────────────────────────── */
.sr-ribbon.sr-shape--horizontal {
    position: absolute;
    top: 16px;
    left: 0;
    padding: 6px 18px 6px 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    z-index: 99;
    pointer-events: none;
    line-height: 1.2;
    white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
    box-shadow: 2px 2px 8px rgba(0,0,0,.2);
}
.sr-ribbon.sr-shape--horizontal.sr-corner--right {
    left: auto;
    right: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
}

/* ── KRUG ────────────────────────────────────────────── */
.sr-ribbon.sr-shape--circle {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.25;
    color: #fff;
    z-index: 99;
    pointer-events: none;
    padding: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    border: 2px solid rgba(255,255,255,.3);
}
.sr-ribbon.sr-shape--circle.sr-corner--right { left: auto; right: 10px; }
.sr-ribbon-single-wrap .sr-ribbon.sr-shape--circle { width: 72px; height: 72px; font-size: 10px; }

/* ── ZASTAVICA ───────────────────────────────────────── */
.sr-ribbon.sr-shape--flag {
    position: absolute;
    top: 0;
    left: 14px;
    padding: 8px 12px 16px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
    z-index: 99;
    pointer-events: none;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
    min-width: 46px;
}
.sr-ribbon.sr-shape--flag.sr-corner--right { left: auto; right: 14px; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 480px) {
    .sr-ribbon.sr-shape--diagonal { width: 130px; height: 20px; line-height: 20px; font-size: 9px; }
    .sr-ribbon.sr-shape--diagonal.sr-corner--right { top: 18px; right: -36px; }
    .sr-ribbon.sr-shape--diagonal.sr-corner--left  { top: 18px; left: -36px; }
    .sr-ribbon.sr-shape--circle { width: 50px; height: 50px; font-size: 8px; }
}


/* Robust positioning for WooCommerce galleries and theme wrappers */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.product-image-wrap,
.product-image,
.woo-entry-image,
.woo-entry-inner,
.wc-block-grid__product-image,
.product-loop-image {
    position: relative;
}


/* Extra wrappers for builders, blocks and theme cards */
.wc-block-components-product-image,
.wc-block-grid__product-image,
.wp-block-post-featured-image,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product a img,
.elementor-widget-woocommerce-products .woocommerce ul.products li.product a,
.elementor-widget-loop-grid .elementor-post__thumbnail__link,
.product.type-product .wp-post-image {
    position: relative;
}

.sr-ribbon-loop-wrap,
.sr-ribbon-single-image-wrap {
    display: inline-block;
}

.sr-ribbon-loop-wrap a,
.sr-ribbon-single-image-wrap a,
.sr-ribbon-loop-wrap picture,
.sr-ribbon-single-image-wrap picture {
    display: block;
}


/* JS fallback injected containers */
.sr-ribbon-injected-container{position:relative;}
.sr-ribbon-wrap[data-sr-product-id]{position:relative;}
.sr-ribbon-wrap,.sr-ribbon-loop-wrap,.sr-ribbon-single-image-wrap{position:relative;}
.sr-ribbon-loop-wrap img,.sr-ribbon-single-image-wrap img{display:block;}