/**
 * Cart icon + item-count badge.
 *
 * Used by the [tsc_cart_icon] shortcode (theme header) and the mobile
 * bottom-nav cart icon. Loaded site-wide, so — like bottom-nav.css — it
 * renders outside the .tsc-* design-token scopes and uses literal values.
 * The badge colours are admin-configurable and injected as :root variables
 * (see tsc_enqueue_cart_icon_assets); red/white are the shipped defaults.
 */

/* Icon + badge share one positioning context. */
.tsc-cart-iconwrap {
    position: relative;
    display: inline-flex;
}

.tsc-cart-count-badge {
    position: absolute;
    top: -6px;
    right: -9px;
    box-sizing: border-box;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--tsc-badge-bg, #ff0000);
    color: var(--tsc-badge-text, #ffffff);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    pointer-events: none; /* Clicks fall through to the cart link. */
}

/* TikTok shows no badge on an empty cart. */
.tsc-cart-count-badge.is-empty {
    display: none;
}

/* Shortcode wrapper link. */
.tsc-cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}
.tsc-cart-icon:hover,
.tsc-cart-icon:focus {
    color: inherit;
    text-decoration: none;
}