.swatch{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.swatch-input{position:absolute;opacity:0;width:0;height:0}.swatch__button{position:relative;display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-bg-elevated);border:2px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .2s ease,background-color .2s ease;font-size:.875rem;font-weight:500;color:var(--color-text)}.swatch__button:hover{border-color:var(--color-text-muted)}.swatch-input:checked+.swatch__button{border-color:var(--color-accent);background:rgba(148,74,255,.1)}.swatch-input:focus-visible+.swatch__button{outline:2px solid var(--color-accent);outline-offset:2px}.swatch-input:disabled+.swatch__button{opacity:.4;cursor:not-allowed}.swatch__button--unavailable{position:relative}.swatch__button--unavailable::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--color-text-subtle);transform:rotate(-45deg)}.swatch--color .swatch__button{width:40px;height:40px;min-width:40px;padding:0;border-radius:var(--radius-full);overflow:hidden}.swatch__color{width:100%;height:100%;border-radius:inherit}.swatch__color-image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.swatch--large .swatch__button{min-width:48px;min-height:48px;padding:var(--spacing-sm) var(--spacing-md);font-size:1rem}.swatch--large.swatch--color .swatch__button{width:48px;height:48px}.swatch--small .swatch__button{min-width:32px;min-height:32px;padding:var(--spacing-xs);font-size:.75rem}.swatch--small.swatch--color .swatch__button{width:32px;height:32px}.swatch--dropdown{position:relative;width:100%}.swatch--dropdown select{width:100%;padding:var(--spacing-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:.9375rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-md) center;padding-right:var(--spacing-2xl)}.swatch--dropdown select:focus{outline:none;border-color:var(--color-accent)}.swatch--dropdown select:disabled{opacity:.5;cursor:not-allowed}.swatch__tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.75rem;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:10}.swatch__tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--color-border)}.swatch__button:hover .swatch__tooltip{opacity:1;visibility:visible}.swatch-group{margin-bottom:var(--spacing-md)}.swatch-group__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm)}.swatch-group__label{font-size:.875rem;font-weight:600;color:var(--color-text)}.swatch-group__value{font-size:.875rem;color:var(--color-text-muted)}.swatch--pill .swatch__button{border-radius:var(--radius-full);padding:var(--spacing-xs) var(--spacing-md)}.swatch--image .swatch__button{padding:2px}.swatch--image .swatch__image{width:36px;height:36px;object-fit:cover;border-radius:calc(var(--radius-sm) - 2px)}.swatch--bordered .swatch-input:checked+.swatch__button{background:transparent;box-shadow:0 0 0 2px var(--color-accent)}