.headboard-swatch-picker{display:grid;gap:16px;width:100%}.hsp__group{display:grid;gap:10px}.hsp__label{margin:0;color:#6d6d6d;font-size:13px;letter-spacing:.04em;text-transform:uppercase}.hsp__label--colour [data-hsp-colour-detail]{color:#2d2d2d;font-weight:600;text-transform:none;letter-spacing:normal}.hsp__swatch-grid{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(36px,max-content));gap:12px 14px}.hsp__swatch-item{position:relative;display:inline-flex;align-items:center;justify-content:center}.hsp__swatch-item.is-at-cap-attempt .hsp__swatch-circle{animation:hsp-cap-shake .35s ease}@keyframes hsp-cap-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.hsp__swatch-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;margin:0;cursor:pointer}.hsp__swatch-circle{width:var(--hsp-circle-size, 38px);height:var(--hsp-circle-size, 38px);border-radius:50%;border:1px solid #bebebe;background:var(--hsp-swatch-color, #d9d9d9);box-sizing:border-box;transition:transform .15s ease,box-shadow .15s ease}.hsp__swatch-input:checked+.hsp__swatch-circle{box-shadow:0 0 0 2px #fff,0 0 0 3px #111;transform:scale(1.04)}.hsp__swatch-input:focus-visible+.hsp__swatch-circle{outline:2px solid #111;outline-offset:3px}.hsp__swatch-input:disabled+.hsp__swatch-circle{opacity:.45;filter:grayscale(20%);cursor:not-allowed}.hsp__preview{display:grid;gap:8px}.hsp__preview-title{margin:0;color:#565656;font-size:13px;text-transform:uppercase;letter-spacing:.04em}.hsp__preview-card{border:1px solid #e3e3e3;border-radius:10px;overflow:hidden;background:#fff;max-width:var(--hsp-preview-max-width-desktop, 210px)}.hsp__preview-image,.hsp__preview-fallback{display:block;width:100%;height:var(--hsp-preview-height-desktop, 90px)}.hsp__preview-image{object-fit:contain;object-position:center;background:#f8f8f8}.hsp__preview-fallback{background:var(--hsp-swatch-color, #e8e8e8)}.hsp__status{margin:0;font-size:14px;line-height:1.4;color:#b42318}.hsp__status[data-hsp-status-type=success]{color:#0f5132}.hsp__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.hsp__btn{min-height:48px;padding:10px 18px;border-radius:6px;font-family:var(--hsp-btn-font-family, inherit);font-weight:var(--hsp-btn-font-weight, 600);font-style:var(--hsp-btn-font-style, normal);font-size:var(--hsp-btn-font-size, 15px);line-height:1.2;cursor:pointer;border:1px solid transparent;flex:1 1 auto;min-width:min(140px,100%)}.hsp__btn:disabled{opacity:.55;cursor:not-allowed}.hsp__btn--primary{background:var(--hsp-btn-primary-bg, #111);color:var(--hsp-btn-primary-color, #fff);border-color:var(--hsp-btn-primary-border, var(--hsp-btn-primary-bg, #111))}.hsp__btn--primary:hover:not(:disabled){background:var(--hsp-btn-primary-hover-bg, #333);border-color:var(--hsp-btn-primary-hover-border, var(--hsp-btn-primary-hover-bg, #333))}.hsp__btn--secondary{background:var(--hsp-btn-secondary-bg, #fff);color:var(--hsp-btn-secondary-color, #202020);border-color:var(--hsp-btn-secondary-border, #d4d4d4)}.hsp__btn--secondary:hover:not(:disabled){border-color:var(--hsp-btn-secondary-hover-border, #9a9a9a)}.is-hidden{display:none}@media screen and (max-width:749px){.headboard-swatch-picker{gap:14px}.hsp__swatch-grid{grid-template-columns:repeat(auto-fit,minmax(34px,max-content));gap:10px 12px}.hsp__preview-card{max-width:var(--hsp-preview-max-width-mobile, 210px)}.hsp__preview-image,.hsp__preview-fallback{height:var(--hsp-preview-height-mobile, 90px)}.hsp__actions{flex-direction:column;align-items:stretch}.hsp__btn{width:100%;min-width:unset}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/headboard-swatch-picker.css.map */