/** Shopify CDN: Minification failed

Line 16:30 Unexpected "<"
Line 178:0 Unexpected "<"
Line 209:2 Comments in CSS use "/* ... */" instead of "//"
Line 209:62 Unterminated string token
Line 216:2 Comments in CSS use "/* ... */" instead of "//"
Line 216:68 Unterminated string token
Line 221:2 Comments in CSS use "/* ... */" instead of "//"
Line 224:2 Comments in CSS use "/* ... */" instead of "//"
Line 231:2 Comments in CSS use "/* ... */" instead of "//"
Line 235:6 Comments in CSS use "/* ... */" instead of "//"
... and 4 more hidden warnings

**/
<!-- Add this code before the </body> tag in theme.liquid -->

<style>
/* Luxury Popup Styles - Isolated */
#luxury-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#luxury-popup-overlay.show {
  opacity: 1;
  visibility: visible;
}

#luxury-popup-overlay.hide-on-scroll {
  opacity: 0;
  visibility: hidden;
}

#luxury-popup-container {
  position: relative;
  background: #f5f3f0;
  max-width: 500px;
  width: 90%;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.4s ease;
  overflow: hidden;
}

#luxury-popup-overlay.show #luxury-popup-container {
  transform: scale(1);
}

#luxury-popup-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #333;
  z-index: 10;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

#luxury-popup-close:hover {
  color: #000;
}

#luxury-popup-content {
  display: flex;
  align-items: stretch;
  min-height: 300px;
  flex-direction: row;
}

#luxury-discount-box {
  background: #000 !important;
  color: #fff !important;
  width: 100px;
  min-width: 100px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: 32px;
  letter-spacing: 1px;
  flex-shrink: 0;
  writing-mode: horizontal-tb;
}

#luxury-popup-text {
  padding: 50px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#luxury-popup-text h2 {
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  margin: 0 0 15px 0;
  color: #000;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#luxury-popup-text p {
  font-size: 14px;
  color: #666;
  margin: 0 0 25px 0;
  line-height: 1.6;
}

#luxury-popup-text input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  margin-bottom: 15px;
  font-size: 14px;
  background: #fff;
}

#luxury-popup-text button {
  width: 100%;
  padding: 14px;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.3s ease;
}

#luxury-popup-text button:hover {
  background: #333;
}

@media (max-width: 600px) {
  #luxury-popup-container {
    max-width: 95%;
  }
  
  #luxury-discount-box {
    width: 80px;
    min-width: 80px;
    font-size: 24px;
  }
  
  #luxury-popup-text {
    padding: 30px 20px;
  }
  
  #luxury-popup-text h2 {
    font-size: 22px;
  }
}
</style>

<!-- Google Fonts - Anton -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">

<!-- Popup HTML -->
<div id="luxury-popup-overlay">
  <div id="luxury-popup-container">
    <button id="luxury-popup-close">&times;</button>
    <div id="luxury-popup-content">
      <div id="luxury-discount-box">10%</div>
      <div id="luxury-popup-text">
        <h2>Welcome</h2>
        <p>Join our exclusive list and receive 10% off your first order.</p>
        <input type="email" placeholder="Enter your email" id="luxury-email-input">
        <button id="luxury-submit-btn">Get My Discount</button>
      </div>
    </div>
  </div>
</div>

<script>
(function() {
  const overlay = document.getElementById('luxury-popup-overlay');
  const closeBtn = document.getElementById('luxury-popup-close');
  const submitBtn = document.getElementById('luxury-submit-btn');
  let lastScrollY = window.scrollY;
  let hasScrolled = false;

  // Show popup after 2 seconds if email hasn't been submitted
  if (!localStorage.getItem('luxuryEmailSubmitted')) {
    setTimeout(() => {
      overlay.classList.add('show');
    }, 2000);
  }

  // Close popup function (temporary - doesn't prevent future shows)
  function closePopup() {
    overlay.classList.remove('show');
  }

  // Close on button click (temporary close only)
  closeBtn.addEventListener('click', closePopup);

  // Close on overlay click (temporary close only)
  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) {
      closePopup();
    }
  });

  // Close on submit and mark as permanently dismissed
  submitBtn.addEventListener('click', function() {
    const email = document.getElementById('luxury-email-input').value;
    if (email && email.includes('@')) {
      // Mark email as submitted - this persists across sessions
      localStorage.setItem('luxuryEmailSubmitted', 'true');
      closePopup();
      // Add your email submission logic here (e.g., Klaviyo, Shopify customer API)
      console.log('Email submitted:', email);
    } else {
      alert('Please enter a valid email address');
    }
  });

  // Hide on scroll (temporary - will show again on next visit)
  window.addEventListener('scroll', function() {
    if (!hasScrolled && Math.abs(window.scrollY - lastScrollY) > 50) {
      hasScrolled = true;
      overlay.classList.add('hide-on-scroll');
    }
  });

  // Close on ESC key (temporary close only)
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && overlay.classList.contains('show')) {
      closePopup();
    }
  });
})();
</script>