/* ==========================================================================
   Fluri Product Badges — Frontend Chip Styles
   ========================================================================== */

/* Kontener plakietek */
.fluri-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Pojedyncza plakietka */
.fluri-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
    /* Kolory ustawiane inline (background-color, color) */
}

/* --- Loop (lista produktów) ---
   Default: zachowuje się inline (bez position: absolute). To zapobiega ucieczce
   do `top:0 / left:0` viewportu na stronach gdzie loop renderuje się poza standardowym
   pozycjonowanym wrapperem (Divi "Shop"/Carousel module, related products w Theme Builder).
   Klasa `--loop-pinned` (lub kwalifikator `.woocommerce ul.products li.product`) włącza
   absolute pozycjonowanie tylko gdzie wiemy że jest pozycjonowany rodzic. */
.fluri-badges--loop {
    position: static;
    margin: .25rem 0;
}
.woocommerce ul.products li.product .fluri-badges--loop,
.fluri-badges--loop.fluri-badges--pinned {
    position: absolute;
    top: .5rem;
    left: .5rem;
    margin: 0;
    z-index: 2;
}

/* --- Single product (rendered right under the title, priority 6 on woocommerce_single_product_summary) --- */
.fluri-badges--single {
    position: static;
    margin: .25em 0 .875em;
}

/* --- Koszyk (WC Blocks) --- */
.fluri-badges--cart {
    position: static;
    margin-top: 4px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
}

.fluri-badges--cart .fluri-badge {
    font-size: 10px;
    padding: 2px 6px;
}

/* Search suggestion chips (Divi Ajax Search) */
.fluri-badges--search {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .25rem;
}

/* Dynamic per-user slot — placeholder is invisible until JS fills it.
   Once replaced with .fluri-dynamic-rendered, badges inherit the flex layout from .fluri-badges. */
.fluri-dynamic-slot {
    display: none;
}
.fluri-dynamic-rendered {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}