.image-upload-field,.preset-picker{margin-bottom:2rem;display:block;width:100%}.preset-picker__help{margin-bottom:1rem;color:rgba(var(--color-foreground),.75)}.preset-picker__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}@media screen and (min-width:750px){.preset-picker__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.preset-tile{display:block;cursor:pointer;text-align:center;padding:.8rem;border:2px solid rgba(var(--color-foreground),.15);border-radius:.8rem;transition:border-color .15s ease,background-color .15s ease;min-width:0}.preset-tile:hover{border-color:rgba(var(--color-foreground),.4)}.preset-tile:has(.preset-tile__input:checked){border-color:rgb(var(--color-foreground));background-color:rgba(var(--color-foreground),.05)}.preset-tile:has(.preset-tile__input:focus-visible){outline:2px solid rgb(var(--color-foreground));outline-offset:2px}.preset-tile__media img{width:100%;height:auto;display:block;border-radius:.5rem}.preset-tile__name{display:block;margin-top:.6rem;font-weight:600;font-size:1.3rem}.preset-tile__desc{display:block;margin-top:.2rem;color:rgba(var(--color-foreground),.75)}.image-upload__trigger{width:100%}.liner-color-picker{display:block;margin:0 0 2rem}.liner-color-picker[hidden],.liner-color-picker [hidden]{display:none}.liner-color-picker__fieldset{border:0;padding:0;margin:0;min-width:0}.liner-color-picker__choices{display:flex;flex-wrap:wrap;gap:1rem}.liner-color-picker__choice{position:relative;display:grid;justify-items:center;gap:.5rem;max-width:8rem;text-align:center;font-size:1.2rem;cursor:pointer}.liner-color-picker__choice input{position:absolute;width:4rem;height:4rem;opacity:0;margin:0;cursor:pointer}.liner-color-picker__swatch{width:4rem;height:4rem;border:1px solid rgba(var(--color-foreground),.3);border-radius:50%}.liner-color-picker__choice input:checked+.liner-color-picker__swatch{outline:2px solid rgb(var(--color-foreground));outline-offset:3px}.liner-color-picker__choice input:checked~span:last-child{font-weight:700}.liner-color-picker__choice input:focus-visible+.liner-color-picker__swatch{outline:3px solid rgb(var(--color-foreground));outline-offset:4px}.liner-color-picker__choice:has(input:disabled){opacity:.35;cursor:not-allowed}.liner-color-picker__choice input:disabled+.liner-color-picker__swatch{background-image:linear-gradient(135deg,transparent 48%,#777 48%,#777 52%,transparent 52%)}.liner-color-picker__preview{display:none}.liner-color-picker__large-swatch{display:block;flex:0 0 6.4rem;height:6.4rem;border:1px solid rgba(var(--color-foreground),.3);border-radius:.8rem}.liner-color-picker__error{color:#b42318}.image-upload__preview{display:flex;align-items:center;gap:1rem;margin-top:1rem}.image-upload__preview[hidden],.image-upload-modal__selected[hidden]{display:none}.image-upload__preview-thumb{width:4.8rem;height:4.8rem;object-fit:cover;border-radius:.8rem;border:1px solid rgba(var(--color-foreground),.15)}.image-upload__preview-name{flex:1;font-size:1.3rem;overflow-wrap:anywhere}.image-upload__help,.image-upload__proof-message{margin-top:.8rem;color:rgba(var(--color-foreground),.75)}.image-upload-modal{box-sizing:border-box;opacity:0;position:fixed;visibility:hidden;z-index:-1;margin:0 auto;top:0;left:0;width:100%;height:100%;background:rgba(var(--color-foreground),.2)}.image-upload-modal[open]{opacity:1;visibility:visible;z-index:101}.image-upload-modal__content{position:absolute;bottom:0;left:0;width:100%;max-height:90vh;overflow-y:auto;background-color:rgb(var(--color-background));padding:2rem;border-radius:1.2rem 1.2rem 0 0;box-sizing:border-box}@media screen and (min-width:750px){.image-upload-modal__content{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);width:60rem;max-width:calc(100% - 4rem);max-height:85vh;border-radius:1.2rem}}.image-upload-modal__close{position:sticky;top:0;float:right;background:none;border:none;cursor:pointer;padding:.5rem;margin:-.5rem -.5rem 0 0}.image-upload-modal__instructions{clear:both;margin-bottom:1.5rem}.image-upload-modal__info-images,.image-upload-modal__comparisons{display:grid;gap:1.6rem;margin-bottom:1.8rem}.image-upload-info-image,.image-upload-comparison{width:100%}.image-upload-info-image h4,.image-upload-comparison h4{margin:0 0 .8rem}.image-upload-info-image img{width:100%;height:auto;border-radius:var(--inputs-radius, 0);display:block}@media screen and (min-width:750px){.image-upload-info-image--half{width:calc(50% - .8rem)}}.image-upload-comparison__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}@media screen and (min-width:750px){.image-upload-comparison__grid{gap:1.2rem}}.image-upload-example{position:relative;text-align:center;min-width:0}.image-upload-example .caption{font-size:1.15rem;line-height:1.3}.image-upload-example img{width:100%;height:auto;border-radius:var(--inputs-radius, 0);display:block}.image-upload-example__badge{display:inline-block;margin-bottom:.8rem;padding:.2rem .8rem;border-radius:5rem;font-size:1.1rem;font-weight:600;text-transform:uppercase}.image-upload-example--good .image-upload-example__badge{background-color:#188d4026;color:#188d40}.image-upload-example--bad .image-upload-example__badge{background-color:#e0222926;color:#e02229}.image-upload-dropzone{border:2px dashed rgba(var(--color-foreground),.3);border-radius:1rem;padding:2.4rem 1.5rem;text-align:center;transition:border-color .2s ease,background-color .2s ease}.image-upload-dropzone.is-dragover{border-color:rgb(var(--color-foreground));background-color:rgba(var(--color-foreground),.05)}.image-upload-dropzone__text{margin:0 0 1rem}.image-upload-dropzone__filetypes{margin:1rem 0 0;color:rgba(var(--color-foreground),.75)}.image-upload-modal__selected{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}.image-upload-modal__selected-thumb{width:6rem;height:6rem;object-fit:cover;border-radius:.8rem;border:1px solid rgba(var(--color-foreground),.15)}.image-upload-modal__selected-name{flex:1;overflow-wrap:anywhere}.image-upload-modal__error{margin-top:1rem;color:#e02229}.image-upload-modal__done{width:100%;margin-top:1.5rem}
/*# sourceMappingURL=/cdn/shop/t/13/assets/component-image-upload.css.map */