:root{--spodi-accent:#1a1a1a;--spodi-border:#d8d8d8;--spodi-bg:#fff;--spodi-fg:inherit;--spodi-muted:#666;--spodi-hover-bg:#f5f5f5;--spodi-active-bg:#1a1a1a;--spodi-active-fg:#fff;--spodi-pill-radius:99px;--spodi-radius:4px;--spodi-label-size:14px;--spodi-item-gap:8px;--spodi-group-gap:20px;--spodi-swatch-size:34px;--spodi-thumb-size:80px;--spodi-border-width:2px}.spodi-variants{margin-bottom:var(--spodi-group-gap)}.spodi-variants:last-child{margin-bottom:0}.spodi-variants__header{align-items:baseline;display:flex;font-size:var(--spodi-label-size);gap:6px;line-height:1.4;margin-bottom:10px}.spodi-variants__group-name{color:var(--spodi-fg);font-weight:700}.spodi-variants__current-label{color:var(--spodi-muted);font-weight:400;transition:color .1s}.spodi-variants__list{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--spodi-item-gap)}.spodi-variants__select{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;background:var(--spodi-bg);border:1px solid var(--spodi-border);border-radius:var(--spodi-radius);cursor:pointer;font-size:inherit;max-width:100%;padding:10px 14px}.spodi-variants__pill{align-items:center;background:var(--spodi-bg);border:none;border-radius:var(--spodi-pill-radius);box-shadow:inset 0 0 0 1px var(--spodi-border);color:var(--spodi-fg);display:inline-flex;font-size:.875em;gap:5px;padding:7px 14px;text-decoration:none;transition:box-shadow .12s,background .12s,color .12s}.spodi-variants__pill:hover{background:var(--spodi-hover-bg);box-shadow:inset 0 0 0 1px var(--spodi-accent)}.spodi-variants__pill--active{background:var(--spodi-active-bg);box-shadow:inset 0 0 0 var(--spodi-border-width) var(--spodi-accent);color:var(--spodi-active-fg)!important}.spodi-variants__swatch{align-items:center;color:var(--spodi-fg);display:inline-flex;flex-direction:column;gap:5px;text-decoration:none}.spodi-variants__swatch-dot{background:#ccc;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);display:block;height:var(--spodi-swatch-size);transition:box-shadow .12s,transform .12s;width:var(--spodi-swatch-size)}.spodi-variants__swatch:hover .spodi-variants__swatch-dot{transform:scale(1.08)}.spodi-variants__swatch--active .spodi-variants__swatch-dot,.spodi-variants__swatch:hover .spodi-variants__swatch-dot{box-shadow:inset 0 0 0 var(--spodi-border-width) var(--spodi-accent),inset 0 0 0 calc(var(--spodi-border-width)*2) #fff}.spodi-variants__swatch-label{color:var(--spodi-muted);font-size:.72em;text-align:center}.spodi-variants__thumbnail{align-items:center;color:var(--spodi-fg);display:inline-flex;flex-direction:column;gap:5px;text-decoration:none}.spodi-variants__thumb-img,.spodi-variants__thumbnail img{border:var(--spodi-border-width) solid transparent;border-radius:var(--spodi-radius);box-sizing:border-box;display:block;height:var(--spodi-thumb-size);-o-object-fit:cover;object-fit:cover;transition:border-color .12s;width:var(--spodi-thumb-size)}.spodi-variants__thumbnail--active .spodi-variants__thumb-img,.spodi-variants__thumbnail--active img,.spodi-variants__thumbnail:hover .spodi-variants__thumb-img,.spodi-variants__thumbnail:hover img{border-color:var(--spodi-accent)}.spodi-variants__pill-label,.spodi-variants__thumbnail-label{font-size:.75em;line-height:1.2}.spodi-variants__thumb-placeholder{background:#e8e8e8;border-radius:var(--spodi-radius);display:block;height:var(--spodi-thumb-size);width:var(--spodi-thumb-size)}