.swatch{--swatch-target:44px;--swatch-dot:36px;--swatch-pill:3.25rem;border:0;padding:0;margin:0;min-inline-size:0}.swatch__legend{padding:0;-webkit-margin-after:var(--space-2);margin-block-end:var(--space-2);font-size:var(--text-small);color:var(--color-ink-muted)}.swatch__chosen{-webkit-margin-start:var(--space-2);margin-inline-start:var(--space-2);color:var(--color-ink);font-weight:550}.swatch__list{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:flex-start}.swatch--size .swatch__list,.swatch__list:not(:has(.swatch__colour)){gap:var(--space-2)}.swatch__item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);position:relative}.swatch__chip{display:grid;place-items:center;min-inline-size:var(--swatch-target);min-block-size:var(--swatch-target);text-decoration:none;color:inherit;position:relative}.swatch__chip:has(.swatch__colour){inline-size:var(--swatch-target);block-size:var(--swatch-target);border-radius:50%}.swatch__colour{position:relative;inline-size:var(--swatch-dot);block-size:var(--swatch-dot);border-radius:50%;background:var(--chip,var(--color-surface));overflow:hidden}.swatch__photo{inline-size:100%;block-size:100%;object-fit:cover}.swatch__colour:after,.swatch__photo{position:absolute;inset:0;border-radius:inherit}.swatch__colour:after{content:"";box-shadow:inset 0 0 0 1px var(--color-line-strong);pointer-events:none}.swatch__chip[aria-checked=true] .swatch__colour{outline:2px solid var(--color-accent);outline-offset:2px}.swatch--size .swatch__chip,.swatch__chip:not(:has(.swatch__colour)){min-inline-size:var(--swatch-pill);block-size:var(--swatch-target);padding-inline:var(--space-3);border-radius:var(--radius);border:1px solid var(--color-line-strong);background:transparent;font-size:var(--text-small);font-weight:550;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;line-height:1;text-align:center}.swatch--size .swatch__chip[aria-checked=true],.swatch__chip:not(:has(.swatch__colour))[aria-checked=true]{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent)}.swatch__label{font-size:var(--text-small);color:var(--color-ink-muted)}.swatch__chip .swatch__label{font-size:inherit;font-weight:inherit;color:inherit}.swatch__price{font-size:var(--text-small);color:var(--color-ink);min-inline-size:6ch;text-align:center}.swatch--color .swatch__chip:has(.swatch__colour)+.swatch__label,.swatch:has(.swatch__chosen) .swatch__chip:has(.swatch__colour)+.swatch__label{position:absolute;inset-block-end:calc(100% + var(--space-1));z-index:2;padding:var(--space-1) var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease)}.swatch--color .swatch__chip:focus-visible+.swatch__label,.swatch:has(.swatch__chosen) .swatch__chip:focus-visible+.swatch__label{opacity:1}.swatch__chip--out,.swatch__chip[aria-disabled=true]{cursor:not-allowed}.swatch__chip--out .swatch__colour,.swatch__chip[aria-disabled=true] .swatch__colour{opacity:.55}.swatch__chip--out:has(.swatch__colour):after,.swatch__chip[aria-disabled=true]:has(.swatch__colour):after{content:"";position:absolute;inline-size:calc(var(--swatch-dot) * 1.414);block-size:1px;background:var(--color-ink);transform:rotate(-45deg);pointer-events:none}.swatch__chip--out .swatch__label,.swatch__chip--out+.swatch__label,.swatch__chip[aria-disabled=true] .swatch__label,.swatch__chip[aria-disabled=true]+.swatch__label{text-decoration:line-through;text-decoration-thickness:1px}.swatch--size .swatch__chip--out,.swatch--size .swatch__chip[aria-disabled=true],.swatch__chip--out:not(:has(.swatch__colour)),.swatch__chip[aria-disabled=true]:not(:has(.swatch__colour)){color:var(--color-ink-muted);font-weight:400}.swatch__chip[aria-checked=true].swatch__chip--out,.swatch__chip[aria-checked=true][aria-disabled=true]{color:var(--color-accent-ink);font-weight:550}@media (hover:hover){.swatch__colour{transition:transform var(--motion-fast) var(--ease)}.swatch__chip:not([aria-disabled=true]):hover .swatch__colour{transform:scale(1.08)}.swatch--size .swatch__chip,.swatch__chip:not(:has(.swatch__colour)){transition:border-color var(--motion-fast) var(--ease),background-color var(--motion-fast) var(--ease)}.swatch--size .swatch__chip:not([aria-disabled=true]):not([aria-checked=true]):hover,.swatch__chip:not(:has(.swatch__colour)):not([aria-disabled=true]):not([aria-checked=true]):hover{border-color:var(--color-ink)}.swatch--color .swatch__item:hover .swatch__chip:has(.swatch__colour)+.swatch__label,.swatch:has(.swatch__chosen) .swatch__item:hover .swatch__chip:has(.swatch__colour)+.swatch__label{opacity:1}}@media (prefers-reduced-motion:reduce){.swatch--color .swatch__chip:has(.swatch__colour)+.swatch__label,.swatch--size .swatch__chip,.swatch:has(.swatch__chosen) .swatch__chip:has(.swatch__colour)+.swatch__label,.swatch__chip:not(:has(.swatch__colour)),.swatch__colour{transition:none}.swatch__chip:hover .swatch__colour{transform:none}}@media (forced-colors:active){.swatch__colour{forced-color-adjust:none}.swatch__colour:after{forced-color-adjust:auto;box-shadow:inset 0 0 0 1px CanvasText}.swatch__chip[aria-checked=true] .swatch__colour{outline-color:Highlight}.swatch__chip--out:has(.swatch__colour):after,.swatch__chip[aria-disabled=true]:has(.swatch__colour):after{background:CanvasText}.swatch--size .swatch__chip[aria-checked=true],.swatch__chip:not(:has(.swatch__colour))[aria-checked=true]{background:Highlight;color:HighlightText;border-color:Highlight}}