.hoa-builder{--hoa-gold: #bfa066;--hoa-gold-deep: #8e6f38;--hoa-gold-soft: #e9dfc8;--hoa-ink: #101b2d;--hoa-muted: #6b7280;--hoa-line: #d7cdbd;--hoa-line-strong: #bfa066;--hoa-cream: #f7f4ee;--hoa-ease: cubic-bezier(.22, .8, .25, 1);--hoa-spring: cubic-bezier(.2, .9, .2, 1.12);width:100%;max-width:100%;min-height:100vh;padding:40px 16px 72px;color:var(--hoa-ink);background:radial-gradient(circle at 50% 0%,rgba(191,160,102,.08),transparent 34%),linear-gradient(180deg,#fff,#f7f4ee 54%,#fff);overflow-x:clip;font-family:var(--font-body-family)}.hoa-builder,.hoa-builder *{box-sizing:border-box}.hoa-builder :is(h1,h2,h3,h4,h5,h6),.hoa-builder :is(.hoa-builder__title,.hoa-builder__heading){font-family:var(--font-heading-family)!important}.hoa-builder button,.hoa-builder select,.hoa-builder input,.hoa-builder textarea{font-family:var(--font-body-family)}.hoa-builder button{-webkit-tap-highlight-color:transparent}.hoa-builder__shell{width:min(1180px,100%);margin:0 auto}.hoa-builder__header{max-width:820px;margin:0 auto 34px;padding:0 12px;text-align:center}.hoa-builder__eyebrow{margin:0 0 10px;color:var(--hoa-muted);font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}.hoa-builder__header h1{margin:0;font-size:clamp(38px,5vw,62px);font-weight:inherit;line-height:1;letter-spacing:-.05em}.hoa-builder__header p{max-width:720px;margin:18px auto 0;color:var(--hoa-muted);font-size:clamp(15px,1.7vw,18px);line-height:1.72}.hoa-builder__layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);gap:22px;align-items:start}.hoa-builder__preview-card,.hoa-builder__controls-card{width:100%;min-width:0;border:1px solid var(--hoa-line);border-radius:30px;background:#fffffff2;box-shadow:0 24px 72px #251c0f17;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.hoa-builder__preview-card{position:sticky;top:96px;padding:22px}.hoa-builder__controls-card{padding:22px}.hoa-builder__topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:15px}.hoa-builder__design-meta{min-width:0;flex:1}.hoa-builder__topbar-actions{display:flex;gap:8px;flex:0 0 auto}.hoa-builder__label{display:block;margin-bottom:8px;color:var(--hoa-muted);font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.hoa-builder__topbar strong{display:block;font-size:15px;font-weight:800;line-height:1.35;word-break:break-word}.hoa-builder__ghost-btn,.hoa-builder__utility-btn{border:1px solid var(--hoa-line);color:var(--hoa-ink);background:#fffffff7;cursor:pointer;font-weight:800;transition:transform .18s var(--hoa-ease),border-color .18s var(--hoa-ease),box-shadow .18s var(--hoa-ease),opacity .18s var(--hoa-ease)}.hoa-builder__ghost-btn{min-height:43px;padding:9px 17px;border-radius:999px;font-size:14px}.hoa-builder__ghost-btn:hover:not(:disabled),.hoa-builder__utility-btn:hover{border-color:var(--hoa-gold);box-shadow:0 12px 28px #bfa06629;transform:translateY(-1px)}.hoa-builder__ghost-btn:active:not(:disabled),.hoa-builder__utility-btn:active{transform:scale(.97)}.hoa-builder__ghost-btn:disabled{opacity:.34;cursor:not-allowed}.hoa-builder__undo-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}.hoa-builder__undo-btn>span:first-child{font-size:20px}.hoa-builder__ring-wrap{position:relative;display:grid;place-items:center;width:100%;min-height:520px;border:1px solid var(--hoa-line);border-radius:26px;background:radial-gradient(circle at center,rgba(191,160,102,.08),transparent 43%),radial-gradient(circle at 50% 52%,#fff 0% 28%,#f8f4ec 64%,#fff);overflow:hidden}.hoa-builder__ring-wrap:before{content:"HOA JEWELLERY";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#15151507;font-size:clamp(36px,5vw,64px);font-weight:900;letter-spacing:-.08em;white-space:nowrap;pointer-events:none}.hoa-builder__ring{position:relative;z-index:2;width:min(470px,84vw);height:min(470px,84vw);max-width:470px;max-height:470px;touch-action:none;user-select:none;-webkit-user-select:none}.hoa-builder__circle-line{position:absolute;left:50%;top:50%;z-index:1;width:var(--hoa-string-diameter, 64%);height:var(--hoa-string-diameter, 64%);border:3px solid rgba(208,197,179,.62);border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 0 2px 4px #ffffffeb,inset 0 -3px 10px #bfa06614;transition:width .28s var(--hoa-ease),height .28s var(--hoa-ease)}.hoa-builder__circle-line:after{content:"";position:absolute;top:7%;right:7%;bottom:7%;left:7%;border:1px solid rgba(191,160,102,.12);border-radius:50%}.hoa-builder__center-note{--hoa-progress-deg: 0deg;position:absolute;top:38.5%;right:38.5%;bottom:38.5%;left:38.5%;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid rgba(220,209,191,.78);border-radius:50%;background:linear-gradient(180deg,#fffffff2,#fffcf6d1);box-shadow:0 16px 40px #251c0f12;text-align:center;pointer-events:none}.hoa-builder__center-note:before{content:"";position:absolute;top:-9px;right:-9px;bottom:-9px;left:-9px;border-radius:50%;background:conic-gradient(var(--hoa-gold) var(--hoa-progress-deg),rgba(191,160,102,.12) 0deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));filter:drop-shadow(0 3px 8px rgba(191,160,102,.18))}.hoa-builder__center-note.is-progress-bump{animation:hoa-progress-bump .36s var(--hoa-spring)}@keyframes hoa-progress-bump{0%{transform:scale(.94)}65%{transform:scale(1.04)}to{transform:scale(1)}}.hoa-builder__center-note span{font-size:clamp(20px,2.4vw,27px);font-weight:900;line-height:1}.hoa-builder__center-note small{margin-top:5px;color:var(--hoa-muted);font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.hoa-builder__slot{--hoa-repel-x: 0px;--hoa-repel-y: 0px;position:absolute;z-index:10;border:2px solid rgba(255,255,255,.98);border-radius:50%;background:#f7f4ee;box-shadow:inset -4px -4px 8px #0000003b,inset 3px 3px 7px #ffffffd1,0 8px 17px #0000002b;overflow:hidden;cursor:grab;transform:translate(calc(-50% + var(--hoa-repel-x)),calc(-50% + var(--hoa-repel-y)));touch-action:none;user-select:none;-webkit-user-select:none;will-change:left,top,transform,box-shadow;transition:left .24s var(--hoa-ease),top .24s var(--hoa-ease),transform .22s var(--hoa-ease),box-shadow .19s var(--hoa-ease),border-color .19s var(--hoa-ease),opacity .19s var(--hoa-ease)}.hoa-builder__slot:after,.hoa-builder__swatch:after,.hoa-builder__selection-swatch:after{content:"";position:absolute;top:9%;left:14%;width:38%;height:27%;border-radius:50%;background:#ffffff8c;filter:blur(1px);transform:rotate(-25deg);mix-blend-mode:screen;pointer-events:none}.hoa-builder__slot:hover{z-index:35;border-color:var(--hoa-gold);transform:translate(calc(-50% + var(--hoa-repel-x)),calc(-50% + var(--hoa-repel-y))) scale(1.08)}.hoa-builder__slot.is-dragging{z-index:100!important;cursor:grabbing;transform:translate(-50%,-50%) scale(1.2) rotate(-2deg)!important;box-shadow:inset -5px -5px 10px #0000004d,inset 4px 4px 9px #ffffffe0,0 24px 42px #00000047,0 0 0 7px #ffffff6b!important}.hoa-builder__slot.is-drop-target{z-index:45;border-color:var(--hoa-gold)!important;transform:translate(calc(-50% + var(--hoa-repel-x)),calc(-50% + var(--hoa-repel-y))) scale(1.1);box-shadow:0 0 0 5px #bfa06633,0 0 0 11px #bfa06612,inset -4px -4px 8px #00000038,inset 3px 3px 7px #ffffffd1,0 16px 30px #bfa06645!important;animation:hoa-target-pulse 1.1s ease-in-out infinite}@keyframes hoa-target-pulse{50%{box-shadow:0 0 0 7px #bfa0663d,0 0 0 15px #bfa06614,inset -4px -4px 8px #00000038,inset 3px 3px 7px #ffffffd1,0 19px 35px #bfa06652}}.hoa-builder__slot.is-repelled{opacity:.9}.hoa-builder__slot.is-just-snapped{animation:hoa-snap .36s var(--hoa-spring)}@keyframes hoa-snap{0%{transform:translate(-50%,-50%) scale(1.22)}70%{transform:translate(-50%,-50%) scale(.96)}to{transform:translate(-50%,-50%) scale(1)}}.hoa-builder--dragging .hoa-builder__slot:not(.is-dragging):not(.is-drop-target){opacity:.76}.hoa-builder__slot.is-filled{background-position:center!important;background-repeat:no-repeat!important}.hoa-builder__slot.has-image,.hoa-builder__swatch.has-image,.hoa-builder__selection-swatch.has-image{background-size:96% 96%!important;background-color:transparent!important}.hoa-builder__slot.is-empty{border-color:#bfa0664f;background:radial-gradient(circle at 32% 28%,#fff,#f7f4ee 58%,#d7cdbd);cursor:pointer;opacity:.84}.hoa-builder__slot-number{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#00000061;font-size:9px;font-weight:900;pointer-events:none}.hoa-builder__onboarding{position:absolute;z-index:30;left:50%;top:50%;display:flex;align-items:center;flex-direction:column;min-width:220px;padding:16px 20px;border:1px solid rgba(191,160,102,.28);border-radius:22px;background:#ffffffe0;box-shadow:0 20px 50px #251c0f26;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;transform:translate(-50%,-42%) scale(.94);pointer-events:none;transition:opacity .3s var(--hoa-ease),transform .35s var(--hoa-ease)}.hoa-builder__onboarding.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.hoa-builder__onboarding-hand{margin-bottom:7px;font-size:25px;animation:hoa-hand 1.1s ease-in-out infinite}@keyframes hoa-hand{50%{transform:translateY(-5px)}}.hoa-builder__onboarding strong{font-size:13px}.hoa-builder__onboarding small{margin-top:4px;color:var(--hoa-muted);font-size:10px}.hoa-builder__hint{min-height:22px;margin:13px 0 0;color:var(--hoa-muted);font-size:13px;line-height:1.45;text-align:center}.hoa-builder__control-group{margin-bottom:21px}.hoa-builder__segmented,.hoa-builder__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.hoa-builder__segmented--two,.hoa-builder__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.hoa-builder__segmented button,.hoa-builder__tabs button{min-width:0;min-height:52px;padding:9px 8px;border:1px solid var(--hoa-line);border-radius:16px;color:var(--hoa-ink);background:#fffffff7;cursor:pointer;font-size:14px;font-weight:900;transition:transform .18s var(--hoa-ease),border-color .18s var(--hoa-ease),box-shadow .18s var(--hoa-ease),background .18s var(--hoa-ease)}.hoa-builder__segmented button:hover,.hoa-builder__tabs button:hover{border-color:var(--hoa-gold);box-shadow:0 10px 24px #bfa06621}.hoa-builder__segmented button.is-active,.hoa-builder__tabs button.is-active{border-color:var(--hoa-ink);color:#fff;background:var(--hoa-ink);box-shadow:0 13px 28px #00000029;transform:translateY(-1px)}.hoa-builder__segmented small{display:block;margin-top:3px;color:var(--hoa-muted);font-size:10px}.hoa-builder__segmented button.is-active small{color:var(--hoa-gold-soft)}.hoa-builder__select{width:100%;min-height:52px;padding:0 15px;border:1px solid var(--hoa-line);border-radius:16px;color:var(--hoa-ink);background:#fff;outline:none;font-size:14px;font-weight:900}.hoa-builder__select:focus{border-color:var(--hoa-gold);box-shadow:0 0 0 4px #bfa0661f}.hoa-builder__tabs{margin-bottom:10px}.hoa-builder__selection-panel{display:none;grid-template-columns:46px minmax(0,1fr) 36px;align-items:center;gap:11px;margin-bottom:11px;padding:10px 13px;border:1px solid rgba(191,160,102,.38);border-radius:18px;background:radial-gradient(circle at 0 0,rgba(191,160,102,.1),transparent 58%),linear-gradient(180deg,#fff,#fcf8f0);box-shadow:0 14px 30px #56401d1a}.hoa-builder__selection-panel.is-visible{display:grid;animation:hoa-selection-panel .32s var(--hoa-spring)}@keyframes hoa-selection-panel{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}.hoa-builder__selection-swatch,.hoa-builder__swatch{position:relative;border:2px solid rgba(255,255,255,.98);border-radius:50%;box-shadow:inset -4px -4px 8px #0000003b,inset 3px 3px 7px #ffffffd1,0 7px 16px #00000029;overflow:hidden;background-position:center!important;background-repeat:no-repeat!important}.hoa-builder__selection-swatch{width:46px;height:46px}.hoa-builder__selection-info{display:flex;flex-direction:column;min-width:0}.hoa-builder__selection-info small{color:var(--hoa-gold-deep);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.hoa-builder__selection-info strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hoa-builder__selection-info span{margin-top:4px;color:var(--hoa-muted);font-size:11px}.hoa-builder__selection-clear{width:34px;height:34px;border:1px solid var(--hoa-line);border-radius:50%;color:var(--hoa-muted);background:#ffffffe6;cursor:pointer;font-size:23px}.hoa-builder__palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:420px;padding:2px 5px 2px 0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--hoa-line-strong) transparent}.hoa-builder__item{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;min-height:67px;padding:10px;border:1px solid var(--hoa-line);border-radius:18px;background:linear-gradient(180deg,#fff,#fffdf8);cursor:pointer;text-align:left;transition:border-color .18s var(--hoa-ease),box-shadow .18s var(--hoa-ease),transform .18s var(--hoa-ease)}.hoa-builder__item:hover,.hoa-builder__item.is-active{border-color:var(--hoa-gold);box-shadow:0 14px 30px #bfa0662e;transform:translateY(-2px)}.hoa-builder__item.is-active:after{content:"\2713";position:absolute;right:7px;top:7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;background:var(--hoa-gold-deep);font-size:11px;font-weight:900}.hoa-builder__swatch{width:44px;height:44px}.hoa-builder__item strong{display:block;font-size:14px;line-height:1.16}.hoa-builder__item small{display:block;margin-top:4px;color:var(--hoa-muted);font-size:11px}.hoa-builder__summary{max-height:155px;margin-bottom:12px;padding:14px;border:1px solid var(--hoa-line);border-radius:19px;color:var(--hoa-muted);background:var(--hoa-cream);font-size:12px;line-height:1.55;overflow-y:auto}.hoa-builder__utility-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:12px}.hoa-builder__utility-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:9px 11px;border-radius:15px;font-size:12px}.hoa-builder__utility-btn.is-success{border-color:#49824d73;color:#2f6b52;background:#f2fbf3}.hoa-builder__add{width:100%;min-height:58px;padding:12px 18px;border:0;border-radius:18px;color:#fff;background:var(--hoa-ink);box-shadow:0 16px 34px #00000030;cursor:pointer;font-size:15px;font-weight:900;transition:transform .18s var(--hoa-ease),background .18s var(--hoa-ease),box-shadow .18s var(--hoa-ease)}.hoa-builder__add:not(:disabled):hover{background:#000;transform:translateY(-2px)}.hoa-builder__add:disabled{background:#cecece;box-shadow:none;cursor:not-allowed}@media(max-width:900px){.hoa-builder{min-height:100svh;padding:0;background:#fff}.hoa-builder__shell{width:100%}.hoa-builder__header{width:100%;margin:0;padding:16px 14px 15px;border-bottom:1px solid var(--hoa-line);background:#fff}.hoa-builder__eyebrow,.hoa-builder__header p{display:none}.hoa-builder__header h1{font-size:27px}.hoa-builder__layout{display:flex;flex-direction:column;gap:0;width:100vw;margin-left:calc(50% - 50vw)}.hoa-builder__preview-card,.hoa-builder__controls-card{width:100%;margin:0}.hoa-builder__preview-card{position:relative;top:auto;padding:14px 12px 10px;border:0;border-radius:0;background:linear-gradient(180deg,#fffefa,#fbf8f1);box-shadow:none}.hoa-builder__design-meta{max-width:calc(100% - 176px)}.hoa-builder__topbar strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hoa-builder__ghost-btn{min-height:46px;padding:0 15px;font-size:13px}.hoa-builder__undo-btn{width:46px;padding:0}.hoa-builder__undo-btn .hoa-builder__action-text{display:none}.hoa-builder__ring-wrap{min-height:405px;height:405px;border-radius:28px}.hoa-builder__ring{width:min(374px,calc(100vw - 28px));height:min(374px,calc(100vw - 28px))}.hoa-builder__center-note{top:38.5%;right:38.5%;bottom:38.5%;left:38.5%}.hoa-builder__controls-card{padding:18px 16px calc(26px + env(safe-area-inset-bottom));border:0;border-radius:31px 31px 0 0;box-shadow:0 -15px 48px #251c0f1c}.hoa-builder__controls-card:before{content:"";display:block;width:40px;height:5px;margin:0 auto 17px;border-radius:999px;background:#ded7cc}.hoa-builder__segmented button,.hoa-builder__tabs button{min-height:54px;padding:8px 5px;font-size:13px}.hoa-builder__palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:255px}.hoa-builder__item{display:flex;flex-direction:column;min-height:110px;padding:9px 6px;text-align:center}.hoa-builder__swatch{width:47px;height:47px}.hoa-builder__item strong{min-height:23px;font-size:10.5px}.hoa-builder__item small{font-size:9px}.hoa-builder__add{position:sticky;bottom:max(9px,env(safe-area-inset-bottom));z-index:30}}@media(max-width:430px){.hoa-builder__header h1{font-size:25px}.hoa-builder__ring-wrap{min-height:390px;height:390px}.hoa-builder__ring{width:min(362px,calc(100vw - 22px));height:min(362px,calc(100vw - 22px))}.hoa-builder__utility-btn{font-size:11px}}@media(prefers-reduced-motion:reduce){.hoa-builder *,.hoa-builder *:before,.hoa-builder *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/*# sourceMappingURL=/cdn/shop/t/105/assets/hoa-bracelet-builder.css.map */