
.hgbb-builder{max-width:1220px;margin:25px auto;padding:24px;background:#fbf8f3;border:1px solid #e8dccb;border-radius:20px;color:#5f5047;font-family:inherit}
.hgbb-builder *{box-sizing:border-box}
.hgbb-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.hgbb-brand h2{margin:3px 0 0;font-size:25px;color:#4d4139}
.hgbb-eyebrow{font-size:10px;letter-spacing:.16em;color:#b28a32;font-weight:700}
.hgbb-header-actions{display:flex;gap:8px;flex-wrap:wrap}
.hgbb-btn{border:1px solid #dfcfbb;border-radius:10px;padding:10px 15px;font-weight:700;cursor:pointer;background:#fff;color:#66564c}
.hgbb-btn-primary{background:#c79f45;color:#fff;border-color:#c79f45}
.hgbb-btn-light:hover,.hgbb-add:hover{background:#f4eadf}
.hgbb-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e8dccb;border:1px solid #e8dccb;border-radius:15px;overflow:hidden;margin-bottom:12px}
.hgbb-summary>div{background:#fff;padding:15px 18px;display:flex;flex-direction:column;gap:5px}
.hgbb-summary span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#89796f}
.hgbb-summary strong{font-size:18px;color:#51443d}
.hgbb-summary-price{text-align:right}
.hgbb-summary-price strong{color:#9b7132}
.hgbb-guide-row{display:flex;align-items:center;gap:12px;padding:7px 4px 16px;color:#8b7a6e;font-size:13px}
.hgbb-guide-button{border:0;background:none;color:#a67d2d;font-weight:800;cursor:pointer;padding:0}
.hgbb-layout{display:grid;grid-template-columns:57% 43%;gap:18px}
.hgbb-stage-panel,.hgbb-products-panel{background:#fff;border:1px solid #e8dccb;border-radius:15px;padding:16px}
.hgbb-wrist-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.hgbb-size-presets{display:flex;gap:5px;flex-wrap:wrap}
.hgbb-size-presets button{border:1px solid #dfcfbb;background:#fff;border-radius:8px;padding:5px 9px;color:#66564c;cursor:pointer}
.hgbb-size-presets button.active{background:#c79f45;color:#fff;border-color:#c79f45}
.hgbb-wrist{width:100%;accent-color:#c79f45}
.hgbb-tools{display:flex;gap:8px;justify-content:center;margin:13px 0}
.hgbb-tools button{border:1px solid #dfcfbb;background:#fff;color:#66564c;border-radius:9px;padding:8px 13px;font-weight:700;cursor:pointer}
.hgbb-canvas{position:relative;width:100%;aspect-ratio:1;max-width:560px;margin:8px auto;background:radial-gradient(circle at 50% 42%,#fff 0%,#fdfbf8 55%,#f6efe7 100%);border:1px solid #eadfd3;border-radius:16px;overflow:visible;touch-action:none;perspective:900px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 30px rgba(80,58,38,.08)}
.hgbb-canvas:before{content:"";position:absolute;left:13%;right:13%;bottom:9%;height:12%;border-radius:50%;background:rgba(77,58,39,.10);filter:blur(12px);transform:scaleY(.45);pointer-events:none}
.hgbb-ring{position:absolute;z-index:5;left:50%;top:50%;width:78%;height:78%;transform:translate(-50%,-50%) rotateX(7deg);border:10px solid #d6b27b;border-radius:50%;box-shadow:0 5px 0 #a98250,0 7px 10px rgba(76,55,34,.16),inset 0 2px 0 rgba(255,246,224,.9),inset 0 -2px 0 rgba(120,85,45,.22),0 0 0 2px rgba(255,255,255,.55);background:transparent}
.hgbb-ring:before{content:"";position:absolute;inset:-10px;border:2px solid rgba(255,248,232,.82);border-radius:50%;pointer-events:none}
.hgbb-ring:after{content:"";position:absolute;inset:5px;border:2px solid rgba(147,105,56,.18);border-radius:50%;pointer-events:none}
.hgbb-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:165px;height:165px;border:1px dashed #e5d8c8;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;color:#8b7a6e;font-size:14px;line-height:1.45}
.hgbb-item{position:absolute;transform:translate(-50%,-50%);z-index:100;user-select:none}
.hgbb-bead{width:58px;height:58px;cursor:grab;position:absolute;touch-action:none}
.hgbb-bead:active{cursor:grabbing}
.hgbb-bead img{width:100%;height:100%;display:block;object-fit:contain;border-radius:50%;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.hgbb-cham{width:78px;height:95px;text-align:center;z-index:30;pointer-events:none}
.hgbb-cham img{width:78px;height:78px;display:block;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.hgbb-cham-line{position:absolute;left:50%;top:-28px;width:2px;height:28px;transform:translateX(-50%);background:#c79f45}
.hgbb-search-wrap{position:relative}
.hgbb-search{width:100%;padding:12px 36px 12px 13px;border:1px solid #e2d5c5;border-radius:10px;margin-bottom:9px}
.hgbb-search-wrap>[data-clear-search]{position:absolute;right:8px;top:6px;border:0;background:none;font-size:22px;color:#8a786c;cursor:pointer}
.hgbb-filters{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:7px;margin-bottom:12px}
.hgbb-filters select{padding:10px;border:1px solid #e2d5c5;border-radius:9px;background:#fff;color:#66564c}
.hgbb-energy{display:flex;justify-content:space-between;gap:10px;background:#fbf8f3;border:1px solid #eadfd3;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.hgbb-energy span{display:block;font-size:9px;letter-spacing:.12em;color:#927e70}
.hgbb-energy strong{font-size:14px;color:#5b4b41}
.hgbb-energy-value{text-align:right}
.hgbb-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:710px;overflow:auto;padding-right:2px}
.hgbb-card{border:1px solid #eadfd3;border-radius:12px;padding:9px;background:#fff}
.hgbb-product-image{width:100%;aspect-ratio:1;border:0;border-radius:9px;background:#f8f4ef;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.hgbb-product-image img{width:100%;height:100%;object-fit:contain;display:block}
.hgbb-card h3{margin:8px 0 5px;font-size:14px;color:#463b35}
.hgbb-meta{font-size:11px;color:#8b7a6e;min-height:15px}
.hgbb-card-price{margin:7px 0;font-weight:800;color:#80613f}
.hgbb-add{width:100%;background:#f3e9df;border:0;border-radius:9px;padding:9px;color:#66564c;font-weight:800;cursor:pointer}
.hgbb-no-products{padding:25px;text-align:center;color:#8b7a6e}
.hgbb-modal[hidden]{display:none}
.hgbb-modal{position:fixed;inset:0;z-index:99999}
.hgbb-modal-backdrop{position:absolute;inset:0;background:rgba(30,24,20,.45)}
.hgbb-modal-card{position:relative;max-width:680px;max-height:88vh;overflow:auto;margin:7vh auto;background:#fff;border-radius:18px;padding:25px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.hgbb-modal-close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px;color:#6d5b50;cursor:pointer}
.hgbb-preview{display:grid;grid-template-columns:42% 58%;gap:22px;align-items:center}
.hgbb-preview>img{width:100%;aspect-ratio:1;object-fit:contain;background:#f8f4ef;border-radius:12px}
.hgbb-preview h2{margin:5px 0}
.hgbb-modal-price{font-weight:800;color:#9b7132;font-size:20px}
.hgbb-guide-tabs{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid #eadfd3;padding-bottom:10px}
.hgbb-guide-tabs button{border:1px solid #dfcfbb;background:#fff;padding:8px 11px;border-radius:8px;cursor:pointer}
.hgbb-guide-tabs button.active{background:#c79f45;color:#fff;border-color:#c79f45}
.hgbb-receipt{list-style:none;padding:0;border-top:1px solid #eadfd3}
.hgbb-receipt li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eee4da}
.hgbb-receipt-total{font-size:20px;font-weight:800;text-align:right;margin-top:14px;color:#9b7132}
@media(max-width:900px){.hgbb-layout{grid-template-columns:1fr}.hgbb-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hgbb-header{align-items:flex-start;flex-direction:column}.hgbb-products{grid-template-columns:repeat(2,minmax(0,1fr))}.hgbb-summary{grid-template-columns:1fr 1fr}.hgbb-preview{grid-template-columns:1fr}.hgbb-builder{padding:12px}}
.hgbb-variant-label{font-size:10px;color:#89796f;margin-bottom:5px;letter-spacing:.04em}
.hgbb-size-options{display:flex;gap:5px;flex-wrap:wrap}
.hgbb-size-option{border:1px solid #dfcfbb;background:#fff;border-radius:7px;padding:4px 8px;color:#66564c;cursor:pointer;font-size:11px;line-height:1.1}
.hgbb-size-option.active{background:#c79f45;color:#fff;border-color:#c79f45}

/* 3D bracelet finish */
.hgbb-item{will-change:transform,left,top;transform:translate(-50%,-50%) translateZ(0)}
.hgbb-bead img{filter:drop-shadow(0 4px 4px rgba(52,38,25,.24)) drop-shadow(0 1px 1px rgba(255,255,255,.7));}
.hgbb-cham img{filter:drop-shadow(0 5px 4px rgba(52,38,25,.25));}

/* v4.2 clean circular bracelet canvas inspired by the supplied reference */
.hgbb-canvas{
  background:#fff;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  perspective:none;
}
.hgbb-canvas:before{display:none}
.hgbb-ring{
  width:76%;
  height:76%;
  border:2px solid #eeeeea;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 8px 18px rgba(70,65,58,.05);
  background:transparent;
}
.hgbb-ring:before,
.hgbb-ring:after{display:none}
.hgbb-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:38%;
  min-width:130px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#8a8a84;
  pointer-events:none;
}
.hgbb-center-title{
  font-size:10px;
  letter-spacing:.14em;
  font-weight:700;
  color:#85857f;
}
.hgbb-center strong{
  font-size:20px;
  letter-spacing:.06em;
  color:#31cfd5;
  line-height:1.1;
}
.hgbb-center small{
  font-size:8px;
  letter-spacing:.12em;
  color:#aaa9a2;
}
.hgbb-bead{
  width:56px;
  height:56px;
  z-index:100;
}
.hgbb-bead img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
  filter:drop-shadow(0 3px 4px rgba(50,45,38,.16));
}
.hgbb-empty{display:none}


/* v4.3: minimal center branding only */
.hgbb-center{width:auto;min-width:0;gap:0;z-index:20;}
.hgbb-center strong{font-size:15px;letter-spacing:.16em;color:#8c8b85;font-weight:700;white-space:nowrap;}
.hgbb-center-title,.hgbb-center small{display:none;}
.hgbb-empty{display:none !important;}
