/* Inspira Woo Add-ons — Custom Product Badges (frontend).
 *
 * Title-relative text badges, NOT image overlays. PHP outputs:
 *   <div class="iwa-custom-badges iwa-custom-badges--{context} iwa-custom-badges--{position}">
 *     <span class="iwa-custom-badge iwa-custom-badge--rule-{rule}" style="bg+color">LABEL</span>
 *     ...
 *   </div>
 * The wrapper is only emitted when at least one badge matched, so :empty
 * handling is not required.
 *
 * Position semantics:
 *   above_title  — appears BEFORE the product title heading
 *   below_title  — appears AFTER the title, before the price
 *   before_price — appears immediately before the price (or rating row)
 *   after_price  — appears immediately after the price
 */

/* Wrapper: tight inline-flex row that wraps on small screens.
 * Margin-bottom on title-adjacent positions for breathing room. */
.iwa-custom-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1;
    margin: 0 0 8px;
}
.iwa-custom-badges--below_title,
.iwa-custom-badges--before_price {
    margin: 4px 0 8px;
}
.iwa-custom-badges--after_price {
    margin: 6px 0 0;
}

/* Loop context: slightly tighter spacing to match thumbnail-card density. */
.iwa-custom-badges--loop {
    margin: 10px 0 11px;
    padding: 5px 2px;
}

/* The badge itself: pill with strong typographic weight. Inline styles
 * from PHP set the bg + text color per variation; everything else here. */
.iwa-custom-badge {
    display: inline-block;
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.25;
    border-radius: 3px;
    white-space: nowrap;
    vertical-align: middle;
}

/* On single product pages the surrounding type can be larger — let the
 * badge breathe a touch more. */
.iwa-custom-badges--single .iwa-custom-badge {
    font-size: 11px;
    padding: 5px 10px;
}