@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.ring-size-error{animation:shake .3s ease-in-out}.ring-size-selector{padding:var(--spacing-1) 0;margin-block-end:calc(var(--product-block-spacing-unit) * 1);background-color:#fff;border:none;border-radius:0}.ring-size-selector .form__label{color:#000;font-size:var(--font-size-static-sm);line-height:var(--line-height-static-sm);text-transform:uppercase;letter-spacing:.1rem;display:block;cursor:pointer;font-weight:var(--font-weight-medium);margin:0 0 .8rem}.ring-size-selector .form__label .button--text{font-size:.875rem;padding:.25rem .5rem;color:var(--color-accent);text-decoration:underline}.ring-size-selector .form__label .button--text:hover{color:var(--color-accent-hover)}.ring-size-select{outline:none;font:inherit;font-size:var(--font-size-static-sm);line-height:var(--line-height-static-md);background-color:#fff;color:rgb(var(--color-heading-text));width:100%;height:4.8rem;padding:0 1.6rem;border:.1rem solid rgba(var(--color-border),var(--alpha-border));border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color var(--duration-default);cursor:pointer}.ring-size-select:focus{border-color:rgb(var(--color-foreground))}.ring-size-select:hover{border-color:rgb(var(--color-foreground))}.ring-size-selector__field{display:flex;flex-direction:column;gap:.8rem}.ring-size-selector .select{position:relative}.ring-size-selector .select:after{content:"";position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);width:0;height:0;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-top:.5rem solid rgb(var(--color-foreground));pointer-events:none}.ring-size-buttons .ring-size-options{display:flex;flex-wrap:wrap;gap:.5rem}.ring-size-button{min-width:3rem;height:3rem;text-align:center;padding:.5rem;border:2px solid var(--color-border);border-radius:6px;background:var(--color-background);color:var(--color-text);font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.ring-size-button:hover{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-text);transform:translateY(-1px)}.ring-size-button.active,.ring-size-radio:checked+.ring-size-button{background:var(--color-accent);color:var(--color-accent-text);border-color:var(--color-accent);box-shadow:0 2px 8px rgba(var(--color-accent-rgb),.3)}.ring-size-radio{position:absolute;opacity:0;pointer-events:none}.ring-size-error{margin-top:.75rem;padding:.75rem;background:var(--color-error-background, #fef2f2);color:var(--color-error-text, #dc2626);border:1px solid var(--color-error-border, #fecaca);border-radius:6px;font-size:.875rem;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.ring-size-selector .product__size-guide{margin-left:auto}.ring-size-selector .drawer__button{padding:0;margin:0}.ring-size-selector .drawer__button .button{font-size:.875rem;padding:.25rem .5rem;background:none;border:none;color:var(--color-accent);text-decoration:underline;cursor:pointer}.ring-size-selector .drawer__button .button:hover{color:var(--color-accent-hover)}@media screen and (min-width: 750px){.ring-size-selector__field{max-width:400px}}@media (max-width: 768px){.ring-size-selector{padding:0}.ring-size-selector .form__label{flex-direction:column;align-items:flex-start;gap:.5rem}.ring-size-buttons .ring-size-options{gap:.25rem}.ring-size-button{min-width:2.5rem;height:2.5rem;font-size:.875rem;padding:.25rem}.ring-size-select{min-width:100%;font-size:12px}.ring-size-select::placeholder,.ring-size-select option:first-child,.ring-size-select:invalid{font-size:12px}}@media (prefers-color-scheme: dark){.ring-size-selector{background:#fff;border-color:transparent}.ring-size-select,.ring-size-button{background:#fff;border-color:rgba(var(--color-border),var(--alpha-border));color:rgb(var(--color-heading-text))}}.ring-size-selector .form__label:focus-within{outline:2px solid var(--color-accent);outline-offset:2px}.ring-size-button:focus{outline:2px solid var(--color-accent);outline-offset:2px}.ring-size-select:focus{outline:2px solid var(--color-accent);outline-offset:2px}.ring-size-selector.loading{opacity:.7;pointer-events:none}.ring-size-selector.loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--color-border);border-top:2px solid var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/ring-size-selector.css.map */