.charm-builder__heading{margin:0 0 .5rem;text-align:center}.charm-builder__intro{text-align:center;margin-bottom:2rem}.charm-builder{display:grid;gap:2.4rem}.charm-builder__preview-col{position:sticky;z-index:2}@media screen and (min-width:990px){.charm-builder{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4rem;align-items:start}.charm-builder__preview-col{top:2rem}}@media screen and (max-width:989px){.charm-builder{padding-bottom:8rem}.charm-builder__preview-col{top:0;margin:0 -1.5rem;padding:.8rem 1.5rem;background:rgb(var(--color-background));box-shadow:0 6px 8px -8px #00000040}.charm-builder .charm-builder__chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.2rem}.charm-builder__chips li{flex:none}.charm-builder__design-head{margin-top:.6rem}.charm-builder__summary{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin:0;padding:1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));background:rgb(var(--color-background));box-shadow:0 -4px 10px #0000001f}.charm-builder__summary .charm-builder__lines{display:none}.charm-builder__summary .charm-builder__total{flex-direction:column;gap:0;margin:0;padding:0;border:0;font-size:1.2rem;line-height:1.3}.charm-builder__summary .charm-builder__total strong{font-size:1.8rem}.charm-builder__summary .button{flex:1;width:auto}.charm-builder__summary .charm-builder__error{order:-1;flex-basis:100%;margin:0}}.charm-builder__stage{position:relative;aspect-ratio:2 / 1;background:#fff;border-radius:1.2rem;overflow:hidden}.charm-builder__base,.charm-builder__pieces{position:absolute;left:0;top:-50%;width:100%;height:200%}.charm-builder__base{object-fit:contain}.charm-builder__piece{position:absolute;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));animation:charm-builder-pop .25s ease-out}.charm-builder__piece--raw{border-radius:20%}@keyframes charm-builder-pop{0%{transform:scale(.6);opacity:0}}@media(prefers-reduced-motion:reduce){.charm-builder__piece{animation:none}}.charm-builder__stage-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;margin:0;color:rgba(var(--color-foreground),.6)}.charm-builder__design-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;font-size:1.3rem;color:rgba(var(--color-foreground),.75)}.charm-builder__link{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer;color:rgb(var(--color-foreground))}.charm-builder__chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:.8rem 0 0;padding:0}.charm-builder__chip{display:flex;align-items:center;gap:.4rem;padding:.3rem .8rem .3rem .3rem;border:1px solid rgba(var(--color-foreground),.2);border-radius:2rem;background:rgb(var(--color-background));font:inherit;font-size:1.3rem;cursor:pointer;color:rgb(var(--color-foreground))}.charm-builder__chip .charm-builder__zoom{width:2.8rem;height:2.8rem;border-radius:50%;flex:none}.charm-builder__chip .charm-builder__zoom img{transform:scale(2.4)}.charm-builder__chip[aria-pressed=true]{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 1px rgb(var(--color-foreground))}.charm-builder__chip-tools{display:flex;gap:.6rem;margin-top:.8rem}.charm-builder__chip-tools .button{min-height:3.6rem;min-width:0;padding:0 1.4rem;font-size:1.3rem}.charm-builder__summary{margin-top:1.4rem}.charm-builder__lines{list-style:none;margin:0 0 .6rem;padding:0;font-size:1.4rem}.charm-builder__lines li,.charm-builder__total{display:flex;justify-content:space-between;gap:1rem}.charm-builder__lines li{padding:.3rem 0;color:rgba(var(--color-foreground),.8)}.charm-builder__total{margin:0 0 1rem;padding-top:.6rem;border-top:1px solid rgba(var(--color-foreground),.15);font-size:1.8rem}.charm-builder__error{margin:.8rem 0 0;color:rgb(var(--color-foreground));background:rgba(var(--color-foreground),.06);border-left:3px solid #c0392b;padding:.6rem 1rem;font-size:1.4rem}.charm-builder__step{padding-bottom:2.4rem;margin-bottom:2.4rem;border-bottom:1px solid rgba(var(--color-foreground),.12)}.charm-builder__step:last-child{border-bottom:0}.charm-builder__step h2{display:flex;align-items:center;gap:1rem;margin:0 0 1.4rem}.charm-builder__step-no{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:rgb(var(--color-foreground));color:rgb(var(--color-background));font-size:1.5rem;flex:none}.charm-builder__sub{font-size:1.4rem;margin:1.6rem 0 .8rem;font-weight:400;color:rgba(var(--color-foreground),.75)}.charm-builder__sub span{color:rgb(var(--color-foreground));font-weight:600}.charm-builder__bases{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:1rem}.charm-builder__base-card,.charm-builder__swatch,.charm-builder__charm,.charm-builder__key{font:inherit;color:rgb(var(--color-foreground));background:rgb(var(--color-background));border:1px solid rgba(var(--color-foreground),.18);border-radius:.8rem;cursor:pointer;transition:border-color .15s,box-shadow .15s}.charm-builder__base-card:hover,.charm-builder__swatch:hover,.charm-builder__charm:hover,.charm-builder__key:hover{border-color:rgba(var(--color-foreground),.6)}.charm-builder__base-card[aria-checked=true],.charm-builder__swatch[aria-checked=true]{border-color:rgb(var(--color-foreground));box-shadow:0 0 0 1px rgb(var(--color-foreground))}.charm-builder__base-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.8rem;font-size:1.3rem;text-align:center;line-height:1.3}.charm-builder__base-card img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}.charm-builder__price{color:rgba(var(--color-foreground),.7);font-size:1.2rem}.charm-builder__swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));gap:.6rem}.charm-builder__swatch{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.4rem;font-size:1.1rem;line-height:1.2;text-align:center}.charm-builder__swatch img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:.4rem}.charm-builder__swatches--small{grid-template-columns:repeat(auto-fill,minmax(7.6rem,1fr))}.charm-builder__swatch:disabled,.charm-builder__charm:disabled,.charm-builder__key:disabled{opacity:.35;cursor:not-allowed}.charm-builder__type{display:flex;gap:.8rem;margin:1.6rem 0 1rem}.charm-builder__type .field__input,.charm-builder__search{flex:1;min-height:4.4rem;padding:0 1.2rem;border:1px solid rgba(var(--color-foreground),.3);border-radius:.6rem;font-size:1.6rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));width:100%;box-sizing:border-box}.charm-builder__type .button{min-width:0;padding:0 2rem}.charm-builder__keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.2rem,1fr));gap:.5rem}.charm-builder__key{min-height:4.4rem;font-size:1.7rem;font-weight:600}.charm-builder__search{margin-bottom:1.2rem}.charm-builder__charms{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.8rem;max-height:60rem;overflow-y:auto;padding:.2rem}.charm-builder__charm{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.6rem;font-size:1.2rem;line-height:1.25;text-align:center}.charm-builder__charm .charm-builder__zoom img{transform:scale(1.7)}.charm-builder__none{grid-column:1 / -1;color:rgba(var(--color-foreground),.7)}.charm-builder__charm,.charm-builder__swatches--small .charm-builder__swatch{overflow:hidden}.charm-builder__swatches--small .charm-builder__swatch .charm-builder__zoom img{transform:scale(3)}.charm-builder__hint{display:block;margin:-.6rem 0 1.2rem;font-size:1.4rem;color:rgba(var(--color-foreground),.75)}.charm-builder__type+.charm-builder__hint{margin:0 0 .8rem}.charm-builder__optional{font-size:1.4rem;font-weight:400;color:rgba(var(--color-foreground),.6)}.charm-builder [hidden]{display:none!important}.charm-builder__band-layer{position:absolute;left:0;top:-50%;width:100%;height:200%}.charm-builder__band{--band-colour: #444;position:absolute;border-radius:999px;background:linear-gradient(180deg,#ffffff38,#fff0 45%,#0000002e),var(--band-colour);box-shadow:0 3px 6px #00000040,inset 0 -2px 3px #0003;transition:background-color .2s}.charm-builder__band:after{content:"";position:absolute;right:4%;top:50%;width:9%;height:34%;transform:translateY(-50%);background:radial-gradient(circle,rgba(0,0,0,.55) 0 45%,transparent 50%) 0 0 / 33.33% 100% repeat-x}.charm-builder__band[data-texture=leather]:before{content:"";position:absolute;top:14%;right:1.5%;bottom:14%;left:1.5%;border:1px dashed rgba(255,255,255,.6);border-radius:999px}.charm-builder__band[data-texture=silicone]{background:linear-gradient(180deg,#fff6,#ffffff0d 35%,#0000001f),var(--band-colour)}.charm-builder__band[data-texture=mesh]{border-radius:.6rem;background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),linear-gradient(180deg,#ffffff8c,#fff0 40%,#00000040),var(--band-colour)}.charm-builder__band[data-rainbow=true]{--band-colour: linear-gradient(90deg, #e74c3c, #f39c12, #f1c40f, #2ecc71, #3498db, #9b59b6);background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),linear-gradient(180deg,#ffffff73,#fff0 40%,#00000040),linear-gradient(90deg,#c0392b,#e67e22,#f1c40f,#27ae60,#2980b9,#8e44ad)}.charm-builder__buckle{position:absolute;left:2.5%;top:-40%;width:4%;height:180%;border:3px solid #c4c4c4;border-radius:.6rem;box-shadow:0 1px 2px #00000059,inset 0 0 0 1px #00000026}.charm-builder__stage .charm-builder__thumb{position:absolute;left:1.5%;top:50%;transform:translateY(-50%);width:18%;height:auto;border-radius:.8rem;border:1px solid rgba(var(--color-foreground),.12)}.charm-builder__zoom{display:block;width:100%;aspect-ratio:1;overflow:hidden;background:#fff;border-radius:.4rem}.charm-builder__zoom img{display:block;width:100%;height:100%;object-fit:cover}.charm-builder__own-base{display:flex;gap:.8rem;align-items:flex-start;margin:0 0 1rem;font-size:1.4rem;line-height:1.4;cursor:pointer}.charm-builder__own-base input{margin-top:.3rem;width:1.6rem;height:1.6rem;flex:none}@media screen and (max-width:989px){.charm-builder__summary .charm-builder__own-base{flex-basis:100%;margin:0;font-size:1.3rem}}
/*# sourceMappingURL=/cdn/shop/t/1/assets/charm-builder.css.map */