:root{--font-monogram: "Perpetua" }.monogram-drawer{position:fixed;z-index:1000;visibility:hidden;left:0;top:0;width:100vw;height:100%;display:flex;justify-content:flex-end;background-color:rgba(var(--color-foreground),.5);transition:visibility var(--duration-default) ease}.monogram-drawer.is-open{visibility:visible;opacity:1;width:100%;height:100%}.monogram-drawer .monogramDrawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:block}.monogram-drawer .monogram-drawer__main{display:flex;flex-direction:column;max-width:460px;height:100%;transition:transform .3s ease;transform:translate(100%);background-color:#fff}.monogram-drawer.is-open .monogram-drawer__main{transform:translate(0)}.monogram-drawer canvas{background-size:cover;background-position:50%;background-repeat:no-repeat;width:100%;height:100%;display:block}.monogram-drawer .hb_canvas{width:512px;height:512px;display:block;position:relative;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-img{position:absolute;top:0;left:0}.monogram-drawer .monogram-drawer__header{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;background-color:#faf4ec;border-bottom:1px solid #E5D9DF}.monogram-drawer .title{font-style:normal;font-weight:500;font-size:24px;line-height:32px;letter-spacing:.03em;color:#080c22;padding-right:10px;margin:0}.monogram-drawer .close-icon{max-width:20px;height:20px;flex:20px;cursor:pointer}.monogram-drawer svg{width:100%;height:100%}.monogram-drawer .loading-overlay__spinner circle{stroke:#faf4ec}.monogram-drawer .drawer__scrollable{padding:28px 24px;overflow-y:auto}.monogram-drawer .monogram-preview-image{margin-bottom:24px;position:relative;width:100%;height:409px;overflow:hidden}.monogram-drawer .hb_monogram-arrow{position:absolute;width:85px;height:60px}.monogram-drawer .monogram-highlights{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.monogram-drawer .monogram-highlights .text,.monogram-drawer .price,.monogram-drawer .monogram__input{font-weight:400;font-size:14px;line-height:26px;display:flex;align-items:center;letter-spacing:.03em;color:#080c22}.monogram-drawer .monogram-field{position:relative;margin-bottom:20px}.monogram-drawer .char-count-wrap,.monogram-drawer .monogram-note,.monogram-drawer .info-item{font-weight:400;font-size:12px;line-height:1.5;letter-spacing:.03em}.monogram-drawer .char-count-wrap{position:absolute;top:50%;right:10px;transform:translateY(-50%);display:flex;align-items:center;text-align:center;color:#beb9b1;grid-gap:5px}.monogram-drawer .monogram__input{width:100%;padding:10px;color:#986473;border-radius:0;border:1px solid #080c22}.monogram-drawer .monogram__input::placeholder{color:#986473}.monogram-drawer .monogram__input:focus,.monogram-drawer .monogram__input:focus-visible{box-shadow:unset;outline:unset}.monogram-drawer .monogram-checkbox-container{margin-bottom:20px}.monogram-drawer .monogram-checkbox{margin-right:10px;position:relative;cursor:pointer}.monogram-drawer .info-list{margin:0;list-style:none;padding-left:21px}.monogram-drawer .info-item{color:#080c22;cursor:pointer}.monogram-drawer .checkbox-input{position:absolute;opacity:0;cursor:pointer;height:18px;width:18px;left:0;top:-9px;z-index:1}.monogram-drawer .checkbox-display{height:18px;width:18px;border:1px solid #986473;background-color:transparent;display:block}.monogram-drawer .monogram-checkbox input:checked~div{background-color:#986473}.monogram-drawer .hb_monogram-checkbox__wrapper{display:flex;align-items:center;cursor:pointer}.monogram-drawer .hb_monogram-checkbox__label{font-size:14px;color:#080c22}.monogram-drawer .checkbox-display:after{content:"";position:absolute;display:none;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.monogram-drawer .monogram-checkbox input:checked~div:after{display:block}.monogram-drawer .price-grid{font-size:16px;text-transform:capitalize;margin:0 0 20px;line-height:24px;color:#080c22;font-weight:400;display:flex;align-items:center}.monogram-drawer .price-grid .mg-label{display:block;margin-right:5px}.monogram-drawer .close-link,.monogram-drawer .btn{font-weight:400;font-size:12px;line-height:12px;text-align:center;letter-spacing:.19em;text-transform:uppercase}.monogram-drawer .btn{width:100%;background-color:#986473;padding:15px;color:#faf4ec;border:none;margin-bottom:20px;cursor:pointer;position:relative}.monogram-drawer .btn:disabled{opacity:.4}.monogram-drawer .close-link{color:#080c22;display:block;text-decoration:underline;text-underline-offset:5px;cursor:pointer}.monogram-drawer .monogram-note{color:#080c22;margin-top:24px}.monogram-drawer .drawer__scrollable::-webkit-scrollbar{width:3px}.monogram-drawer .drawer__scrollable::-webkit-scrollbar-thumb{background-color:rgba(var(--color-foreground));border-radius:100px}.monogram-drawer .loading-overlay__spinner{width:18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.monogram-drawer .loading-overlay__spinner path{stroke:#fff}.monogram-drawer .max-characters-text{margin-left:5px}.monogram-drawer .error-message{font-size:12px;line-height:1.5;color:#d20202;text-align:center;display:block;margin-bottom:20px;text-wrap:balance}.monogram-drawer .loading-overlay__spinner:not(.hidden)~*{visibility:hidden}.monogram-drawer .custom-img img{width:100%;height:100%;display:block;object-fit:cover}.monogram-price-wrapper{display:flex;align-items:center}.monogram-price-wrapper .comapare-price{font-weight:400;font-size:14px;line-height:26px;display:flex;align-items:center;letter-spacing:.03em;color:#beb9b1;text-decoration:line-through;margin-left:4px}@media screen and (max-width: 767px){.monogram-drawer .monogram-drawer__main{max-width:100%;border-left:unset}.monogram-drawer .monogram-preview-image{margin-bottom:20px}.monogram-drawer .monogram-drawer__header{padding:14px 20px}.monogram-drawer .title{font-size:20px}.monogram-drawer .drawer__scrollable{padding:22px 20px}.monogram-drawer .char-count-wrap{font-size:10px;grid-gap:3px}.monogram-drawer .monogram__input{font-size:12px}.monogram-drawer .monogram__input::placeholder{font-size:10px}}@media screen and (max-width: 480px){.monogram-drawer .monogram-preview-image{height:332px}}
/*# sourceMappingURL=/cdn/shop/t/656/assets/monogram-drawer.css.map */