.ofcore-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;align-items:center}.ofcore-swatch{cursor:pointer;border:1px solid #ddd;background:#fff;padding:0;position:relative;transition:border-color 0.15s,box-shadow 0.15s,background 0.15s,color 0.15s,opacity 0.15s;display:inline-flex;align-items:center;justify-content:center;appearance:none;-webkit-appearance:none;line-height:1;font-family:inherit}.ofcore-swatch:focus-visible{outline:2px solid #1b1815;outline-offset:2px}.ofcore-swatch--color,.ofcore-swatch--image{width:var(--ofcore-swatch-size,36px);height:var(--ofcore-swatch-size,36px);overflow:hidden}.ofcore-swatch--shape-circle{border-radius:50%}.ofcore-swatch--shape-square{border-radius:0}.ofcore-swatch--shape-rounded{border-radius:8px}.ofcore-swatch__color{width:100%;height:100%;display:block}.ofcore-swatch--color.is-selected,.ofcore-swatch--image.is-selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #1b1815;border-color:#fff0}.ofcore-swatch__img{display:block;width:100%;height:100%}.ofcore-swatch__img img{width:100%;height:100%;object-fit:cover;display:block}.ofcore-swatch--size{min-width:calc(var(--ofcore-swatch-size, 36px) + 6px);height:calc(var(--ofcore-swatch-size, 36px) + 6px);border-radius:4px;padding:0 12px;font-size:13px;font-weight:500;color:#1b1815}.ofcore-swatch--size.is-selected{border-color:#1b1815;background:#1b1815;color:#fff}.ofcore-swatch__text{display:block;white-space:nowrap}.ofcore-swatch.is-out-of-stock{opacity:.4}.ofcore-swatch.is-out-of-stock::after{content:"";position:absolute;top:50%;left:-2px;right:-2px;height:1px;background:#999;transform:rotate(-45deg);pointer-events:none}.ofcore-swatch.is-out-of-stock.is-disabled,.ofcore-swatch.is-disabled{pointer-events:none;cursor:not-allowed}.ofcore-swatch.is-hidden{display:none!important}.ofcore-swatch:hover:not(.is-disabled){border-color:#1b1815}.ofcore-loop-swatches{display:flex;gap:4px;margin-top:8px;align-items:center;flex-wrap:wrap}.ofcore-loop-swatch{width:16px;height:16px;border-radius:50%;border:1px solid #ddd;display:inline-block;text-decoration:none;box-sizing:border-box}.ofcore-loop-swatch-more{font-size:11px;color:#999}@media (max-width:640px){.ofcore-swatches{gap:6px}.ofcore-swatch--size{min-width:38px;padding:0 10px;font-size:12px}}