/* Shared Storefront System Icon primitive.
   UI icons are code-controlled SVG symbols; branding/content assets remain admin-managed. */
.site-icon {
    width: 22px;
    height: 22px;
    max-width: none;
    flex: 0 0 22px;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: currentColor;
    pointer-events: none;
}

.site-icon--sm {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

.site-icon--lg {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

.site-icon--xl {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.site-icon--section-mark {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    stroke-width: 1.55;
}

/* Favorite is the only navigation/action icon that intentionally fills when active. */
[data-wishlist-toggle].active .site-icon--heart {
    fill: currentColor;
}