/* Badge Container */
.bsb-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Increased gap slightly */
    margin-bottom: 10px;
}

/* Loop/Thumbnail Position */
.bsb-product-badges-loop {
    position: absolute;
    top: 26px;
    left: 10px;
    z-index: 10;
    pointer-events: none; /* Layout container passes clicks through */
    flex-direction: column; /* Vertical stack */
}

/* Enable pointer events on the badges themselves so tooltips work if needed, 
   but strictly speaking, hover works without pointer-events: auto on some browsers 
   if parent is none. However, usually we want the badge to capture hover.
   But user said "badges não interfiram no link da miniatura". 
   If we put pointer-events: auto, it blocks the link under the badge.
   Hover usually works on elements with pointer-events: none in some contexts? 
   No, pointer-events: none prevents hover states in CSS.
   
   To support tooltips (hover) while keeping the link clickable "through" the badge implies 
   we can't easily have both standard CSS hover AND click-through on the exact same pixels 
   without JS or careful layering.
   
   However, usually "not interfere with link" means "don't block the click".
   If I set pointer-events: auto on the badge, clicking the badge won't click the product.
   The user *kept* the existing specific request "don't interfere".
   
   Let's try to keep pointer-events: none on the container.
   If I give pointer-events: auto to the badge, it blocks clicks.
   Maybe the user accepts that clicking the *badge* doesn't open the product?
   Or maybe they want the badge to trigger the link too?
   Usually, badges overlaying images are small enough.
   
   For now, to make tooltips work, we MUST have pointer-events: auto on the badge items.
   This means clicking the *badge icon* naturally will NOT pass through to the underlying link 
   unless we wrap the badge in a link or use JS.
   
   But commonly, a small badge blocking a small part of the click is acceptable for the tooltip trade-off.
   Let's add pointer-events: auto to .bsb-badge-item.
*/
.bsb-product-badges-loop .bsb-badge-item {
    pointer-events: auto; 
    cursor: help; /* Indicate it has info, or default */
}

/* Single Product Position */
.bsb-product-badges-single {
    margin: -15px 0 15px 0;
    flex-direction: row; /* Keep horizontal on single page? Or user implied vertical everywhere? "passar os badges na listagem para uma lista em coluna" -> specifically mentions "listagem". Single page likely stays horizontal or default. */
}

/* Badge Item */
.bsb-badge-item {
    position: relative; /* For tooltip positioning */
    display: inline-block;
}

.bsb-badge-item img {
    width: 40px;
    height: auto;
    display: block;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background: #fff;
    padding: 2px;
}

/* Tooltip Styles */
.bsb-badge-item:before {
    content: attr(data-bsb-tooltip);
    position: absolute;
    bottom: 100%;
    left: 0; /* Align to left edge */
    transform: translateY(-8px); /* Move up */
    background: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    pointer-events: none;
}

.bsb-badge-item:after {
    /* Triangle */
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px; /* Center with the left-aligned tooltip roughly? Or left edge of badge is 0. Badge is 40px wide. Center is 20px. */
    /* User said "start right from the arrow, as if left aligned". 
       If tooltip is left aligned (left:0), the arrow should probably be near the center of the badge (left: 50% or 20px).
    */
    left: 20px; 
    transform: translateX(-50%) translateY(0px); /* Adjust to touch tooltip */
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    pointer-events: none;
    margin-bottom: -2px; /* Pull arrow down slightly to overlap/touch */
}

.bsb-badge-item:hover:before,
.bsb-badge-item:hover:after {
    opacity: 1;
    visibility: visible;
}

/* Loop Specific overrides - force top as well */
.bsb-product-badges-loop .bsb-badge-item:before {
    /* Reset from previous right-side logic if any */
    bottom: 100%;
    left: 0;
    top: auto;
    transform: translateY(-8px);
}
.bsb-product-badges-loop .bsb-badge-item:after {
    bottom: 100%;
    left: 20px;
    top: auto;
    transform: translateX(-50%);
    border-color: #333 transparent transparent transparent;
}