/* Shop badges (shops::badges.chip); the icons are the storefront's icon font (iconly.css) */
.shop-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 12px; border-radius: 50px;
    font-size: 13px; font-weight: 600; line-height: 1.6; white-space: nowrap;
    color: var(--badge-color); background: #f6f6f8; border: 1px solid #e6e6ea;
}
/* a tint of the badge's colour where the browser can mix colours; the grey above elsewhere */
@supports (background: color-mix(in srgb, red 10%, #fff)) {
    .shop-badge {
        background: color-mix(in srgb, var(--badge-color) 10%, #fff);
        border-color: color-mix(in srgb, var(--badge-color) 25%, #fff);
    }
}
.shop-badge i { font-size: 15px; }
.shop-badge.is-small { width: 26px; height: 26px; padding: 0; justify-content: center; }
.shop-badge.is-small i { font-size: 14px; }

/* a custom picture instead of the font icon */
.shop-badge img { width: 18px; height: 18px; object-fit: contain; }
.shop-badge.is-small img { width: 16px; height: 16px; }

/* shop card: on the logo's bottom-right corner, apart from the online dot (bottom-left) */
.shop-item-logo-badges { position: absolute; bottom: -4px; right: -6px; display: flex; gap: 2px; z-index: 2; }
.shop-item-logo-badges .shop-badge.is-small { width: 24px; height: 24px; background: #fff; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .15); }
.shop-item-logo-badges .shop-badge.is-small i { font-size: 13px; }