.elementor-383 .elementor-element.elementor-element-4f614c4d{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-383 .elementor-element.elementor-element-d81289e{--display:flex;}.elementor-383 .elementor-element.elementor-element-62d9941{--display:flex;}.elementor-383 .elementor-element.elementor-element-9eac83c{--display:flex;}.woocommerce .elementor-widget-woocommerce-product-price .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );text-decoration:var( --e-global-typography-primary-text-decoration );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}body:not(.rtl) .elementor-383 .elementor-element.elementor-element-d4b42cd{left:0px;}body.rtl .elementor-383 .elementor-element.elementor-element-d4b42cd{right:0px;}.elementor-383 .elementor-element.elementor-element-d4b42cd{top:0px;}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.woocommerce .elementor-widget-woocommerce-product-price .price{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.woocommerce .elementor-widget-woocommerce-product-price .price{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}}/* Start custom CSS for woocommerce-product-price, class: .elementor-element-d4b42cd */<div class="luxury-variants-wrapper">

  <div class="luxury-option-group">
    <label class="luxury-label">METAL COLOR / צבע זהב</label>
    <div class="luxury-metal-row">
      <div class="metal-btn active" onclick="setLuxuryMetal(this, 'Yellow Gold 14K')">
        <span class="dot yellow"></span>
      </div>
      <div class="metal-btn" onclick="setLuxuryMetal(this, 'White Gold 14K')">
        <span class="dot white"></span>
      </div>
      <div class="metal-btn" onclick="setLuxuryMetal(this, 'Rose Gold 14K')">
        <span class="dot rose"></span>
      </div>
    </div>
    <div id="metal-result" class="luxury-selected-text">Yellow Gold 14K</div>
  </div>

  <div class="luxury-option-group">
    <label class="luxury-label">DIAMOND CARAT / קראט יהלום</label>
    <div class="luxury-scroll-track">
      <button class="luxury-circle active" onclick="setLuxuryOption(this)">0.30</button>
      <button class="luxury-circle" onclick="setLuxuryOption(this)">0.50</button>
      <button class="luxury-circle" onclick="setLuxuryOption(this)">0.70</button>
      <button class="luxury-circle" onclick="setLuxuryOption(this)">1.00</button>
      <button class="luxury-circle" onclick="setLuxuryOption(this)">1.50</button>
    </div>
  </div>

  <div class="luxury-option-group">
    <div class="luxury-flex-label">
      <label class="luxury-label">RING SIZE / מידה</label>
      <button class="luxury-guide-link" onclick="openSizePopup()">Size Guide 📏</button>
    </div>
    <div class="luxury-scroll-track">
      <button class="luxury-circle" onclick="setLuxuryOption(this)">46</button>
      <button class="luxury-circle" onclick="setLuxuryOption(this)">48</button>
      <button class="luxury-circle active" onclick="setLuxuryOption(this)">50</button>
      <button class="luxury-circle" onclick="setLuxuryOption(this)">52</button>
      <button class="luxury-circle" onclick="setLuxuryOption(this)">54</button>
      <button class="luxury-circle" onclick="setLuxuryOption(this)">56</button>
      <button class="luxury-circle" onclick="setLuxuryOption(this)">58</button>
      <button class="luxury-circle" onclick="setLuxuryOption(this)">60</button>
    </div>
  </div>

  <button class="luxury-add-btn">
    <span>ADD TO BAG</span>
    <span>₪4,200</span>
  </button>
  
  <div class="luxury-shipping-info">✨ משלוח מבוטח חינם | עד 12 תשלומים</div>

</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600&display=swap');

  /* Container Reset */
  .luxury-variants-wrapper {
    font-family: 'Assistant', sans-serif;
    direction: ltr;
    text-align: left;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .luxury-option-group { margin-bottom: 25px; }

  .luxury-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #111;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  /* Metal Selector */
  .luxury-metal-row { display: flex; gap: 12px; }
  .metal-btn {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 1px solid transparent; transition: 0.3s;
  }
  .metal-btn.active { border-color: #111; }
  
  .dot { width: 22px; height: 22px; border-radius: 50%; display: block; }
  .dot.yellow { background: #E6C57F; }
  .dot.white { background: #E5E5E5; }
  .dot.rose { background: #E1B195; }
  
  .luxury-selected-text { font-size: 12px; color: #666; margin-top: 6px; font-style: italic; }

  /* Horizontal Scroll Logic */
  .luxury-scroll-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
  }
  .luxury-scroll-track::-webkit-scrollbar { display: none; /* Chrome/Safari */ }

  /* Circle Buttons */
  .luxury-circle {
    flex: 0 0 auto; /* Prevent shrinking */
    width: 50px; height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e1e1e1;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    margin: 0;
  }

  .luxury-circle.active {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: scale(1.05);
  }

  .luxury-flex-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .luxury-guide-link {
    background: none; border: none; font-size: 11px;
    text-decoration: underline; color: #888; cursor: pointer; padding: 0;
  }

  /* Add to Cart Button */
  .luxury-add-btn {
    width: 100%;
    padding: 20px;
    background: #111;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    letter-spacing: 2px;
    margin-top: 20px;
    transition: background 0.3s;
  }
  .luxury-add-btn:hover { background: #C5A059; }

  .luxury-shipping-info {
    text-align: center; font-size: 11px; color: #999; margin-top: 12px;
  }
</style>

<script>
  function setLuxuryMetal(el, text) {
    // Reset siblings
    const siblings = el.parentElement.children;
    for (let sib of siblings) { sib.classList.remove('active'); }
    // Set active
    el.classList.add('active');
    // Update text
    document.getElementById('metal-result').innerText = text;
  }

  function setLuxuryOption(btn) {
    // Find all buttons in this specific track
    const track = btn.parentElement;
    const buttons = track.querySelectorAll('.luxury-circle');
    
    // Remove active class from all
    buttons.forEach(b => b.classList.remove('active'));
    
    // Add active to clicked
    btn.classList.add('active');
  }

  function openSizePopup() {
    alert("כאן יפתח הפופאפ של המידות"); 
  }
</script>/* End custom CSS */