.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:20px;font-weight:500;font-family:var(--font-inter);transition:all .2s ease;cursor:default;border:1px solid rgba(0,0,0,0);white-space:nowrap}.badge__content{gap:.25rem}.badge__content,.badge__remove{display:flex;align-items:center}.badge__remove{background:none;border:none;cursor:pointer;padding:0;width:1rem;height:1rem;justify-content:center;border-radius:50%;font-size:.75rem;font-weight:600;transition:all .2s ease;opacity:.7}.badge__remove:hover{opacity:1;background:rgba(0,0,0,.1)}.badge__remove:focus{outline:2px solid currentColor;outline-offset:2px}.badge--small{font-size:.75rem;padding:.125rem .5rem;gap:.25rem}.badge--small .badge__remove{width:.75rem;height:.75rem;font-size:.625rem}.badge--medium{font-size:.875rem;padding:.25rem .75rem;gap:.5rem}.badge--large{font-size:1rem;padding:.375rem 1rem;gap:.75rem}.badge--large .badge__remove{width:1.25rem;height:1.25rem;font-size:.875rem}.badge--default{background:var(--bg-light);color:var(--text-primary);border-color:var(--border-color)}.badge--default .badge__remove:hover{background:rgba(0,0,0,.1)}.badge--primary{background:var(--primary-gradient);color:#fff}.badge--primary .badge__remove:hover{background:hsla(0,0%,100%,.2)}.badge--success{background:var(--success-color);color:#fff}.badge--success .badge__remove:hover{background:hsla(0,0%,100%,.2)}.badge--warning{background:var(--warning-color);color:#fff}.badge--warning .badge__remove:hover{background:hsla(0,0%,100%,.2)}.badge--error{background:var(--error-color);color:#fff}.badge--error .badge__remove:hover{background:hsla(0,0%,100%,.2)}.badge--info{background:var(--product-info-color,#3b82f6);color:#fff}.badge--info .badge__remove:hover{background:hsla(0,0%,100%,.2)}.badge:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.1)}.badge:focus{outline:2px solid var(--primary-color);outline-offset:2px}.badge:disabled{opacity:.5;transform:none}.badge:disabled,.badge:disabled .badge__remove{cursor:not-allowed}.badge-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}@media(max-width:768px){.badge--large{font-size:.875rem;padding:.25rem .75rem}}