/* =============================================
   LUXURY VARIANT GROUPS
   ============================================= */
.variant-groups{ margin-bottom:20px; display:flex; flex-direction:column; gap:20px; }
.variant-group{ display:flex; flex-direction:column; gap:10px; }
.variant-group-label{ font-size:10px; font-weight:700; opacity:.35; text-transform:uppercase; letter-spacing:2px; }
.variant-group-options{ display:flex; flex-wrap:wrap; gap:10px; }

/* METAL SWATCH */
.metal-swatch{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; background:none; border:none; transition:transform .2s; }
.metal-swatch-circle{
  width:46px; height:46px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.1);
  position:relative; overflow:hidden;
  transition:all .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.metal-swatch-circle::before{
  content:""; position:absolute; top:-20%; left:-20%;
  width:55%; height:55%;
  background:rgba(255,255,255,.5);
  border-radius:50%; filter:blur(8px);
}
.metal-swatch-circle::after{
  content:""; position:absolute; bottom:10%; right:10%;
  width:20%; height:20%;
  background:rgba(255,255,255,.3);
  border-radius:50%; filter:blur(3px);
}
.metal-swatch-label{ font-size:10px; color:rgba(255,255,255,.45); font-weight:600; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; transition:color .2s; }
.metal-swatch:hover{ transform:translateY(-2px); }
.metal-swatch:hover .metal-swatch-circle{ border-color:rgba(68,241,207,.6); box-shadow:0 4px 16px rgba(68,241,207,.3); }
.metal-swatch:hover .metal-swatch-label{ color:#44f1cf; }
.metal-swatch.active .metal-swatch-circle{ border-color:#44f1cf; box-shadow:0 0 20px rgba(68,241,207,.6); transform:scale(1.12); }
.metal-swatch.active .metal-swatch-label{ color:#44f1cf; font-weight:700; }

/* STONE SWATCH */
.stone-swatch{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; background:none; border:none; transition:transform .2s; }
.stone-swatch-gem{
  width:46px; height:46px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.1);
  overflow:hidden; position:relative;
  transition:all .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
}
.stone-swatch-gem img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.stone-swatch-gem::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);
  border-radius:50%; pointer-events:none; z-index:1;
}
.stone-swatch-label{ font-size:10px; color:rgba(255,255,255,.45); font-weight:600; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; transition:color .2s; max-width:54px; text-align:center; line-height:1.3; }
.stone-swatch:hover{ transform:translateY(-2px); }
.stone-swatch:hover .stone-swatch-gem{ border-color:rgba(68,241,207,.6); box-shadow:0 4px 16px rgba(68,241,207,.3); }
.stone-swatch:hover .stone-swatch-label{ color:#44f1cf; }
.stone-swatch.active .stone-swatch-gem{ border-color:#44f1cf; box-shadow:0 0 20px rgba(68,241,207,.6); transform:scale(1.12); }
.stone-swatch.active .stone-swatch-label{ color:#44f1cf; font-weight:700; }

/* TEXT / SIZE BUTTONS */
.opt-btn{ padding:8px 18px; border-radius:30px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(255,255,255,.7); font-size:13px; cursor:pointer; transition:all .2s; white-space:nowrap; letter-spacing:.3px; backdrop-filter:blur(4px); }
.opt-btn:hover{ border-color:#44f1cf; color:#44f1cf; background:rgba(68,241,207,.06); }
.opt-btn.active{ background:linear-gradient(135deg,#44f1cf,#2dd4b4); color:black; font-weight:700; border-color:transparent; box-shadow:0 4px 15px rgba(68,241,207,.4); }

.size-btn{ padding:8px 14px; border-radius:20px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(255,255,255,.7); font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; white-space:nowrap; }
.size-btn:hover{ border-color:#44f1cf; color:#44f1cf; }
.size-btn.active{ background:linear-gradient(135deg,#44f1cf,#2dd4b4); color:black; font-weight:700; border-color:transparent; box-shadow:0 4px 12px rgba(68,241,207,.4); }

/* UNAVAILABLE */
.unavailable{ opacity:.2 !important; pointer-events:none !important; filter:grayscale(1) !important; }