.bi {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: -0.125em;
}

.bi::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--bi-icon, var(--bi-icon-circle)) center / contain no-repeat;
    mask: var(--bi-icon, var(--bi-icon-circle)) center / contain no-repeat;
}

.bi-shop { --bi-icon: var(--bi-icon-shop); }
.bi-cart,
.bi-cart-plus,
.bi-cart-check,
.bi-cart-x { --bi-icon: var(--bi-icon-cart); }
.bi-person-circle { --bi-icon: var(--bi-icon-user); }
.bi-box-arrow-in-right { --bi-icon: var(--bi-icon-login); }
.bi-telephone,
.bi-telephone-fill { --bi-icon: var(--bi-icon-phone); }
.bi-envelope,
.bi-envelope-fill,
.bi-envelope-check { --bi-icon: var(--bi-icon-mail); }
.bi-whatsapp,
.bi-instagram,
.bi-telegram,
.bi-send { --bi-icon: var(--bi-icon-send); }
.bi-funnel { --bi-icon: var(--bi-icon-filter); }
.bi-search { --bi-icon: var(--bi-icon-search); }
.bi-grid,
.bi-grid-1x2 { --bi-icon: var(--bi-icon-grid); }
.bi-folder { --bi-icon: var(--bi-icon-folder); }
.bi-chevron-right,
.bi-arrow-right { --bi-icon: var(--bi-icon-arrow-right); }
.bi-arrow-left { --bi-icon: var(--bi-icon-arrow-left); }
.bi-arrow-down-circle { --bi-icon: var(--bi-icon-arrow-down); }
.bi-info-circle { --bi-icon: var(--bi-icon-info); }
.bi-image { --bi-icon: var(--bi-icon-image); }
.bi-slash-circle { --bi-icon: var(--bi-icon-close); }
.bi-check2,
.bi-check-circle-fill { --bi-icon: var(--bi-icon-check); }
.bi-truck { --bi-icon: var(--bi-icon-truck); }
.bi-shield-check,
.bi-shield-lock { --bi-icon: var(--bi-icon-shield); }
.bi-arrow-repeat { --bi-icon: var(--bi-icon-repeat); }
.bi-trash { --bi-icon: var(--bi-icon-trash); }
.bi-person-plus { --bi-icon: var(--bi-icon-user-plus); }
.bi-key { --bi-icon: var(--bi-icon-key); }
.bi-receipt { --bi-icon: var(--bi-icon-receipt); }
.bi-bag { --bi-icon: var(--bi-icon-bag); }
.bi-geo-alt-fill { --bi-icon: var(--bi-icon-pin); }
.bi-clock-history,
.bi-clock-fill { --bi-icon: var(--bi-icon-clock); }
.bi-headset { --bi-icon: var(--bi-icon-headset); }
.bi-briefcase { --bi-icon: var(--bi-icon-briefcase); }
.bi-people { --bi-icon: var(--bi-icon-people); }
.bi-credit-card { --bi-icon: var(--bi-icon-card); }
.bi-tools { --bi-icon: var(--bi-icon-tools); }
.bi-star { --bi-icon: var(--bi-icon-star); }
.bi-chat-dots { --bi-icon: var(--bi-icon-chat); }

:root {
    --bi-icon-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='white'/%3E%3C/svg%3E");
    --bi-icon-shop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 7h12v7H2V7Zm1-5h10l2 4H1l2-4Zm3 7v5h4V9H6Z'/%3E%3C/svg%3E");
    --bi-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 1h2l1.2 7.2A2 2 0 0 0 6.2 10H12a2 2 0 0 0 1.9-1.4L15 4H4.1L3.8 2H1V1Zm5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm6 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z'/%3E%3C/svg%3E");
    --bi-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm0 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm0 10a5.8 5.8 0 0 1-4-1.6C4.5 10.9 6 10 8 10s3.5.9 4 2.4A5.8 5.8 0 0 1 8 14Z'/%3E%3C/svg%3E");
    --bi-icon-login: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M9 2h5v12H9v-2h3V4H9V2ZM7.5 4.5 11 8l-3.5 3.5V9H1V7h6.5V4.5Z'/%3E%3C/svg%3E");
    --bi-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 1h3l1 3-2 1c1 2 2.5 3.5 5 5l1-2 3 1v3c0 1-1 3-3 3C6 15 1 10 1 4c0-2 2-3 3-3Z'/%3E%3C/svg%3E");
    --bi-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 3h14v10H1V3Zm1.5 1.5L8 8l5.5-3.5h-11ZM2 12h12V6L8 10 2 6v6Z'/%3E%3C/svg%3E");
    --bi-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7 1a6 6 0 1 0 3.5 10.9l3.3 3.3 1.4-1.4-3.3-3.3A6 6 0 0 0 7 1Zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z'/%3E%3C/svg%3E");
    --bi-icon-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 3h14L9.5 9v5l-3-1.8V9L1 3Z'/%3E%3C/svg%3E");
    --bi-icon-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 2h5v5H2V2Zm7 0h5v5H9V2ZM2 9h5v5H2V9Zm7 0h5v5H9V9Z'/%3E%3C/svg%3E");
    --bi-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 4h5l1.5 2H15v8H1V4Z'/%3E%3C/svg%3E");
    --bi-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M9 3 8 4l3 3H2v2h9l-3 3 1 1 5-5-5-5Z'/%3E%3C/svg%3E");
    --bi-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='m7 3 1 1-3 3h9v2H5l3 3-1 1-5-5 5-5Z'/%3E%3C/svg%3E");
    --bi-icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 14 3 9l1-1 3 3V2h2v9l3-3 1 1-5 5Z'/%3E%3C/svg%3E");
    --bi-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm1 11H7V7h2v5ZM7 4h2v2H7V4Z'/%3E%3C/svg%3E");
    --bi-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 2h12v12H2V2Zm2 9h8L9 7l-2 3-1.5-2L4 11Zm8-6a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z'/%3E%3C/svg%3E");
    --bi-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm3.5 9.1-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1Z'/%3E%3C/svg%3E");
    --bi-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='m6.2 11.5-4-4L3.6 6l2.6 2.6L12.4 2.5 14 4l-7.8 7.5Z'/%3E%3C/svg%3E");
    --bi-icon-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 3h9v7h1l1-3h2l1 3v2h-1a2 2 0 0 1-4 0H6a2 2 0 0 1-4 0H1V3Zm3 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
    --bi-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1 2 3v4c0 4 2.5 6.5 6 8 3.5-1.5 6-4 6-8V3L8 1Zm3.5 5.5-4 4-2-2L7 7l.5.5 2.5-2.5 1.5 1.5Z'/%3E%3C/svg%3E");
    --bi-icon-repeat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12 3 9 0v2H5a4 4 0 0 0-4 4h2a2 2 0 0 1 2-2h4v2l3-3ZM4 13l3 3v-2h4a4 4 0 0 0 4-4h-2a2 2 0 0 1-2 2H7v-2l-3 3Z'/%3E%3C/svg%3E");
    --bi-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M5 1h6l1 2h3v2H1V3h3l1-2Zm-1 5h8l-.6 9H4.6L4 6Z'/%3E%3C/svg%3E");
    --bi-icon-user-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm0 1c-3 0-5 1.5-5 4v1h8v-1c0-1 .4-2 1-2.7C9 9.5 7.6 9 6 9Zm7-2h-2v2H9v2h2v2h2v-2h2V9h-2V7Z'/%3E%3C/svg%3E");
    --bi-icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.5 10a4 4 0 1 1 3.6-2.3L16 13.6 14.6 15l-1.4-1.4-1.4 1.4-1.4-1.4 1.4-1.4-2.1-2.1A4 4 0 0 1 6.5 10Zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E");
    --bi-icon-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M3 1h10v14l-2-1-2 1-2-1-2 1-2-1V1Zm2 3v2h6V4H5Zm0 4v1h6V8H5Zm0 3v1h4v-1H5Z'/%3E%3C/svg%3E");
    --bi-icon-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 5h8l1 10H3L4 5Zm2 0a2 2 0 1 1 4 0h1a3 3 0 1 0-6 0h1Z'/%3E%3C/svg%3E");
    --bi-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 15s5-5 5-9A5 5 0 0 0 3 6c0 4 5 9 5 9Zm0-7a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
    --bi-icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M15 1 1 7l5 2 2 6 7-14ZM7 8.5l4-4-2.5 5L7 8.5Z'/%3E%3C/svg%3E");
    --bi-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm1 7.6 3 1.8-1 1.6-4-2.4V4h2v4.6Z'/%3E%3C/svg%3E");
    --bi-icon-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 8a6 6 0 1 1 12 0v4h-3V8h2a5 5 0 0 0-10 0h2v4H2V8Zm7 6h3v1H9v-1Z'/%3E%3C/svg%3E");
    --bi-icon-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6 2h4l1 2h4v10H1V4h4l1-2Zm1 2h2l-.3-1H7.3L7 4Z'/%3E%3C/svg%3E");
    --bi-icon-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6Zm7-1a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5ZM6 9c-3 0-5 1.5-5 4v1h10v-1c0-2.5-2-4-5-4Zm7-1c-1 0-1.8.2-2.5.6 1.2.8 2 2 2 3.4v1H16v-1c0-2.5-1.2-4-3-4Z'/%3E%3C/svg%3E");
    --bi-icon-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M1 3h14v10H1V3Zm1 2v2h12V5H2Zm1 5v1h4v-1H3Z'/%3E%3C/svg%3E");
    --bi-icon-tools: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='m10 1 5 5-2 2-2-2-5 5v2l-3 2-2-2 2-3h2l5-5-2-2 2-2Z'/%3E%3C/svg%3E");
    --bi-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='m8 1.5 2 4 4.5.6-3.2 3.1.8 4.4L8 11.5l-4.1 2.1.8-4.4L1.5 6.1 6 5.5l2-4Z'/%3E%3C/svg%3E");
    --bi-icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M2 2h12v9H6l-4 3V2Zm3 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
}