.custom-variants-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;}
.custom-variants{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.custom-variant-pill{position:relative;display:inline-flex;align-items:center;padding:8px 12px;border-radius:9999px;border:1px solid #e0e0e0;background:#fff;font-size:16px;line-height:1;cursor:pointer;transition:box-shadow .15s ease,border-color .15s ease,background .15s ease;}
.custom-variant-pill.is-stock{}
.custom-variant-pill.is-not-stock{opacity:.7;background:#f7f7f7;}
.custom-variant-pill:hover{box-shadow:0 2px 6px rgba(0,0,0,.08);}
.custom-variant-pill:focus{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.15);}
.custom-variant-pill.is-active{border-color: #506faf;background: #fff;color: black;}
.custom-variant-pill[data-tooltip]:hover::after,
.custom-variant-pill[data-tooltip]:focus::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:#111;color:#fff;padding:6px 8px;border-radius:6px;font-size:12px;line-height:1.2;z-index:10;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.15);}
.custom-variant-pill[data-tooltip]:hover::before,
.custom-variant-pill[data-tooltip]:focus::before{content:"";position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #111;}