.swatch-properties{display:block!important;width:100%}.swatch-properties .item{display:block!important;width:100%!important;max-width:100%!important;flex:0 0 100%!important;grid-column:1 / -1!important;margin-bottom:40px!important;float:none!important;clear:both}.swatch-properties .line-item-property__field{display:block;width:100%;margin:0}.swatch-properties .swatch-label{display:block;font-weight:600;margin-bottom:20px!important;font-size:18px}.swatch-selected{display:inline-block;margin-left:4px;padding:2px 10px;font-weight:600;background:#f4f4f4;border-radius:12px;color:#111;font-size:13px;vertical-align:baseline}.colour-swatches{list-style:none;margin:0;padding:0;display:grid!important;grid-template-columns:repeat(auto-fill,50px);gap:10px;width:100%;justify-content:start}.colour-swatches li{margin:0;padding:0;list-style:none;width:50px;height:50px}.colour-swatches .swatch{position:relative;display:block;width:50px;height:50px;padding:0;border:1px solid #ddd;border-radius:50%;background:#fff;cursor:pointer;overflow:visible;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;box-sizing:border-box}.colour-swatches .swatch img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}.colour-swatches .swatch:hover{transform:scale(1.08)}.colour-swatches .swatch:focus{outline:none}.colour-swatches .swatch:focus-visible{outline:2px solid #fff;outline-offset:3px}.colour-swatches .swatch.is-selected{border-color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px #111}.colour-swatches .swatch--missing img{display:none}.colour-swatches .swatch--missing:after{content:"?";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#eee;color:#888;border-radius:50%;font-weight:700}.colour-swatches .swatch[data-tooltip]:after{content:attr(data-tooltip);position:absolute;left:var(--tt-left, 50%);top:var(--tt-top, auto);bottom:var(--tt-bottom, auto);transform:translateY(var(--tt-translate, 4px));background:#111;color:#fff;font-size:12px;font-weight:500;line-height:1;padding:6px 9px;border-radius:4px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease,transform .15s ease;z-index:20}.colour-swatches .swatch[data-tooltip]:before{content:"";position:absolute;left:var(--tt-arrow, 50%);top:var(--tt-arrow-top, auto);bottom:var(--tt-arrow-bottom, auto);width:0;height:0;border:5px solid transparent;transform:translate(-50%);pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:20}.colour-swatches .swatch[data-place=top]:before{border-top-color:#111}.colour-swatches .swatch[data-place=bottom]:before{border-bottom-color:#111}.colour-swatches .swatch:hover:after,.colour-swatches .swatch:focus-visible:after,.colour-swatches .swatch.show-tooltip:after{opacity:1;transform:translateY(0)}.colour-swatches .swatch:hover:before,.colour-swatches .swatch:focus-visible:before,.colour-swatches .swatch.show-tooltip:before{opacity:1}@media(max-width:480px){.colour-swatches{grid-template-columns:repeat(auto-fill,44px);gap:8px}.colour-swatches li,.colour-swatches .swatch{width:44px;height:44px}.colour-swatches .swatch[data-tooltip]:after{font-size:11px;padding:5px 8px}}.swatch-summary{margin-top:1rem;margin-bottom:1rem;padding:12px 14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.15);border-radius:6px;font-size:14px;line-height:1.5}.swatch-summary__value{font-weight:700;white-space:nowrap}.swatch-selected:empty:before,.swatch-selected[data-empty=true]{color:#888;font-style:italic;font-weight:400}.swatch-summary__value[data-empty=true]{color:#888;font-weight:400}.swatch-summary.is-complete{border-color:#78c87880;background:#78c87814}button.swatch-locked,[type=submit].swatch-locked,[name=add].swatch-locked{opacity:.5!important;cursor:not-allowed!important;pointer-events:auto!important}.swatch-label--error{color:#d33!important;animation:swatchShake .35s ease-in-out 2}@keyframes swatchShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.swatch-summary p{margin:0}.swatch-summary__prompt{color:#d77;font-weight:500}.swatch-summary.is-complete .swatch-summary__prompt{display:none}.swatch-summary.is-complete .swatch-summary__result{display:block!important}
/*# sourceMappingURL=/cdn/shop/t/5/assets/colour-swatches.css.map */