:root{--charm-cream: #FBEFE3;--charm-ink: #2B2420;--charm-muted: #8A7E72;--charm-border: rgba(43, 36, 32, .12);--charm-radius: 16px;--charm-radius-sm: 10px}.charm-trigger{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:44rem;padding:16px 20px;background:transparent;color:var(--trigger-color, var(--trigger-bg, #2B2420));border:2px solid var(--trigger-bg, #2B2420);border-radius:999px;font-family:inherit;font-size:14px;font-weight:400;letter-spacing:.02em;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease}.charm-trigger:hover{background:var(--trigger-hover-bg, var(--trigger-bg, #2B2420));color:var(--trigger-hover-color, #FBEFE3);border-color:var(--trigger-hover-bg, var(--trigger-bg, #2B2420))}.charm-trigger:active{transform:scale(.98)}.charm-trigger svg{color:var(--trigger-icon-color, #E8B84B);flex-shrink:0}.charm-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999}.charm-modal[hidden]{display:none}.charm-modal__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#14100c73;animation:charm-fade-in .18s ease}.charm-modal__panel{position:relative;z-index:1;max-width:860px;width:calc(100% - 32px);margin:5vh auto;max-height:90vh;display:flex;flex-direction:column;background:var(--charm-cream);border-radius:24px;box-shadow:0 24px 64px #00000040;overflow:hidden;animation:charm-rise-in .22s cubic-bezier(.2,.8,.2,1)}@keyframes charm-fade-in{0%{opacity:0}to{opacity:1}}@keyframes charm-rise-in{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.charm-modal__header{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 0;flex-shrink:0}.charm-modal__title{font-size:22px;font-weight:700;letter-spacing:.01em;color:var(--charm-ink);margin:0;text-transform:uppercase}.charm-modal__title--main{color:var(--charm-title-color, var(--charm-ink))}.charm-modal__close{width:36px;height:36px;display:grid;place-items:center;background:#fff;border:none;border-radius:50%;color:var(--charm-ink);cursor:pointer;flex-shrink:0}.charm-modal__close:hover{background:#f2e9dc}.charm-modal__body{padding:20px 28px 8px;overflow-y:auto;flex:1}.charm-modal__footer{padding:16px 28px 24px;flex-shrink:0}.charm-field{margin-bottom:18px}.charm-field__label{display:block;font-size:14px;font-weight:600;color:var(--charm-ink);margin-bottom:10px}.charm-field__label--collar-preview{color:var(--charm-collar-preview-label-color, var(--charm-ink))}.charm-field__label--charm-preview{color:var(--charm-charm-preview-label-color, var(--charm-ink))}.charm-field__label--grid{color:var(--charm-grid-label-color, var(--charm-ink))}.charm-swatches{display:flex;gap:10px;flex-wrap:wrap}.charm-swatch{width:30px;height:30px;border-radius:50%;background:var(--swatch-color);border:2px solid transparent;box-shadow:0 0 0 1px #00000014;cursor:pointer;padding:0;transition:box-shadow .15s ease}.charm-swatch.is-selected{box-shadow:0 0 0 2px var(--charm-cream),0 0 0 4px var(--charm-swatch-active-color, var(--charm-ink))}.charm-preview{position:relative;height:130px;margin-bottom:10px;overflow:visible;display:flex;align-items:center}.charm-preview__band{display:block!important;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:50px;width:100%;background-color:var(--current-collar-color, #FFFFFF);border-radius:20px;transition:background-color .2s ease;box-shadow:0 2px 8px #0000001f}.charm-preview__charms{display:flex!important;position:relative;z-index:1;width:100%;align-items:center;justify-content:center;gap:8px;padding:16px 20px;overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;box-sizing:border-box}.charm-preview__charms::-webkit-scrollbar{display:none}.charm-preview__charms.is-overflowing{justify-content:flex-start}.preview-charm{position:relative;width:80px;height:110px;display:grid;place-items:center;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));animation:charm-pop-in .18s ease;flex-shrink:0}.preview-charm__visual{width:100%;height:100%;border-radius:12px;overflow:hidden;display:grid;place-items:center}.preview-charm__img{width:100%;height:100%;object-fit:cover;border-radius:12px}.preview-charm__letter{display:grid;place-items:center;width:100%;height:100%;font-family:Georgia,Times New Roman,serif;font-weight:700;font-size:52px;background:var(--current-charm-color, #F0D878);border-radius:12px;-webkit-text-fill-color:transparent;-webkit-text-stroke:0}.preview-charm__letter{background-image:linear-gradient(#0000002e,#0000002e),linear-gradient(var(--current-charm-color, #F0D878),var(--current-charm-color, #F0D878));-webkit-background-clip:text,padding-box;background-clip:text,padding-box}.preview-charm__letter--word{font-size:13px;font-family:inherit;text-transform:uppercase;letter-spacing:.02em}.preview-charm__remove{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#fff;border:none;display:grid;place-items:center;font-size:11px;line-height:1;cursor:pointer;box-shadow:0 1px 4px #0003;color:var(--charm-ink)}@keyframes charm-pop-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.charm-counter{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--charm-muted);margin-bottom:20px}.charm-counter__tally{display:inline-flex;align-items:center;white-space:nowrap}.charm-clear{background:none;border:1px solid var(--charm-border);border-radius:8px;padding:6px 14px;font-size:13px;color:var(--charm-ink);cursor:pointer}.charm-clear:hover{background:#0000000a}.charm-pills{display:flex;gap:8px;flex-wrap:wrap}.charm-pill{padding:8px 18px;border-radius:999px;border:2px solid transparent;background:var(--pill-color);color:var(--pill-text, var(--charm-ink));font-size:12px;font-weight:700;letter-spacing:.03em;cursor:pointer;box-shadow:0 0 0 1px #00000014;transition:box-shadow .15s ease,transform .1s ease}.charm-pill.is-selected{box-shadow:0 0 0 2px var(--charm-cream),0 0 0 4px var(--charm-pill-active-border-color, #2B2420)}.charm-pill:active{transform:scale(.97)}.charm-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}.charm-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 10px;background:#fff;border:1px solid var(--charm-border);border-radius:var(--charm-radius-sm);cursor:pointer;transition:border-color .15s ease,transform .1s ease}.charm-tile:hover{border-color:var(--charm-ink)}.charm-tile:active{transform:scale(.96)}.charm-tile.is-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.charm-tile__img{width:36px;height:36px;object-fit:cover;border-radius:6px}.charm-tile__glyph{height:36px;font-family:Georgia,Times New Roman,serif;font-weight:700;font-size:30px;color:var(--current-charm-color, #F0D878)}.charm-tile__glyph--word{font-size:10px;font-family:inherit;text-transform:uppercase;letter-spacing:.03em;-webkit-text-fill-color:var(--current-charm-color, #F0D878)}.charm-tile__label{font-size:11px;color:var(--charm-muted);font-weight:600}.charm-tile__label em{font-style:normal;color:var(--charm-oos-color, #B8453A);display:block;font-size:9px;margin-top:2px}.charm-tile__label em.is-low-stock{color:var(--charm-low-stock-color, #C47800)}.charm-tile__label em.is-preorder{color:var(--charm-preorder-color, #4C6FE0)}.charm-tile.is-preorder{border-color:#4c6fe059}.charm-add-btn{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px;background:var(--charm-add-btn-color, #4C6FE0);color:#fff;border:none;border-radius:999px;cursor:pointer;transition:opacity .15s ease}.charm-add-btn:disabled{opacity:.4;cursor:not-allowed}.charm-add-btn__title{font-size:15px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}.charm-add-btn__detail{font-size:12px;opacity:.85}@media(max-width:480px){.charm-modal__panel{margin:2vh auto;max-height:96vh}.charm-grid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}.preview-charm{width:36px;height:60px}.preview-charm__visual,.preview-charm__img{border-radius:6px}.preview-charm__letter{font-size:20px;border-radius:6px}.preview-charm__remove{width:14px;height:14px;font-size:8px;top:-5px;right:-5px}.charm-preview{height:70px}.charm-preview__charms{gap:0px;padding:10px 12px}}@media(prefers-reduced-motion:reduce){.charm-modal__overlay,.charm-modal__panel,.preview-charm{animation:none!important}}
/*# sourceMappingURL=/cdn/shop/t/23/assets/charm-personalizer.css.map */