/* =========================================================================
   ATTRIBUTE BADGES — kapsułki z ikonami cech produktu (v1.3, wariant B)
   Ładowane warunkowo: karta produktu, sklep, kategoria, tag produktu.
   ========================================================================= */

.qi-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 12px 0;
}

/* W pętli kategorii ciaśniej — pod tytułem produktu */
.woocommerce-loop-product__title + .qi-wrap,
.woo-loop-product__title + .qi-wrap {
    gap: 5px;
    margin: 8px 0 10px;
}

/* Kapsułka — inline-flex, ikona + tekst poziomo, zaokrąglona na końcach */
.qi-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #e6f1fb;
    border-radius: 999px;
    line-height: 1.2;
    /* zapobiega skakaniu kapsułki w środku zdania */
    vertical-align: middle;
}

/* Ikona — 20px wystarcza żeby były widoczne i dom, i słońce.
   W summary karty produktu trochę większa (22px) dla lepszej proporcji. */
.qi-badge .qi-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

body.single-product .qi-badge .qi-icon {
    width: 22px;
    height: 22px;
}

.qi-label {
    font-size: 12px;
    font-weight: 600;
    color: #0c447c;
    white-space: nowrap;
    letter-spacing: 0;
}

body.single-product .qi-label {
    font-size: 13px;
}

/* W kafelkach kategorii — mniejszy tekst dla zwartego layoutu */
.woocommerce-loop-product__title + .qi-wrap .qi-label,
.woo-loop-product__title + .qi-wrap .qi-label {
    font-size: 11px;
}
.woocommerce-loop-product__title + .qi-wrap .qi-icon,
.woo-loop-product__title + .qi-wrap .qi-icon {
    width: 18px;
    height: 18px;
}