/** Shopify CDN: Minification failed

Line 16:0 Unexpected "/"
Line 23:3 Unexpected "{"
Line 23:23 Expected ":"
Line 25:20 Unexpected "-->"
Line 40:10 Unexpected "{"
Line 40:22 Expected ":"
Line 40:27 Expected identifier but found whitespace
Line 40:29 Unexpected "{"
Line 40:35 Expected ":"
Line 40:43 Unexpected "<"
... and 16 more hidden warnings

**/
/<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="#1a0a0f">
  {{ content_for_header }}

  <!-- Google Fonts -->
  <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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- GSAP CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

  <!-- Three.js CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

  <!-- VanillaTilt.js CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>

  <title>{{ page_title }} | {{ shop.name }}</title>
  <meta name="description" content="{{ page_description | escape }}">

  <style>
    :root {
      /* Color Palette */
      --primary: #1a0a0f;
      --accent: #c9a96e;
      --accent-hover: #d4b373;
      --text-primary: #ffffff;
      --text-secondary: rgba(255,255,255,0.8);
      --text-muted: rgba(255,255,255,0.6);
      --card-bg: rgba(255,255,255,0.05);
      --card-border: rgba(255,255,255,0.1);
      --glass-bg: rgba(255,255,255,0.08);
      --shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
      --shadow-lg: 0 35px 70px -20px rgba(0,0,0,0.6);
      
      /* Typography */
      --font-heading: 'Playfair Display', serif;
      --font-body: 'Inter', sans-serif;
      --font-size-xl: clamp(2.5rem, 5vw, 4rem);
      --font-size-lg: clamp(1.875rem, 4vw, 2.5rem);
      --font-size-md: clamp(1.25rem, 3vw, 1.5rem);
      --font-size-sm: clamp(0.875rem, 2vw, 1rem);
      
      /* Spacing */
      --space-xs: 0.5rem;
      --space-sm: 1rem;
      --space-md: 2rem;
      --space-lg: 4rem;
      --space-xl: 6rem;
    }

    /* Base Reset */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; height: 100%; }
    body { font-family: var(--font-body); line-height: 1.6; color: var(--text-primary); background: var(--primary); overflow-x: hidden; }
    h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; margin: 0 0 var(--space-sm); line-height: 1.2; }
    h1 { font-size: var(--font-size-xl); }
    h2 { font-size: var(--font-size-lg); }
    h3 { font-size: var(--font-size-md); }
    p { margin: 0 0 var(--space-sm); }
    a { color: inherit; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    img { max-width: 100%; height: auto; display: block; }
    button { border: none; background: none; cursor: pointer; font-family: inherit; }
    ul, ol { list-style: none; padding: 0; margin: 0; }

    /* Smooth Scroll */
    html { scroll-behavior: smooth; scroll-padding-top: 80px; }

    /* Custom Cursor */
    .cursor, .cursor-follower { position: fixed; width: 20px; height: 20px; border: 2px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 9999; transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1); mix-blend-mode: difference; }
    .cursor-follower { width: 40px; height: 40px; border: 1px solid var(--accent); opacity: 0.3; z-index: 9998; }
    .cursor.hover { transform: scale(1.5) !important; }
    .cursor.text { width: 8px; height: 8px; border-width: 1px; }

    /* Scroll Progress */
    .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); z-index: 10000; transition: width 0.1s ease; }

    /* Preloader */
    .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary) 0%, #2a1a20 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10001; transition: opacity 0.5s ease, visibility 0.5s ease; }
    .preloader.hidden { opacity: 0; visibility: hidden; }
    .preloader__logo { font-family: var(--font-heading); font-size: clamp(2rem, 8vw, 4rem); font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--space-lg); animation: glow 2s ease-in-out infinite alternate; }
    .preloader__spinner { width: 60px; height: 60px; border: 3px solid rgba(201, 169, 110, 0.2); border-top: 3px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
    @keyframes glow { 0% { text-shadow: 0 0 20px var(--accent); } 100% { text-shadow: 0 0 40px var(--accent), 0 0 60px var(--accent); } }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    /* WhatsApp Button */
    .whatsapp-btn { position: fixed; bottom: 2rem; right: 2rem; width: 60px; height: 60px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: 1000; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: pulse 2s infinite; }
    .whatsapp-btn:hover { transform: scale(1.1) translateY(-4px); box-shadow: 0 30px 60px -15px rgba(37, 211, 102, 0.4); }
    .whatsapp-btn svg { width: 28px; height: 28px; fill: white; }

    /* Back to Top */
    .back-to-top { position: fixed; bottom: 6rem; right: 2rem; width: 50px; height: 50px; background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--card-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; }
    .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
    .back-to-top:hover { background: var(--card-bg); transform: translateY(-4px); }

    /* Glassmorphism Cards */
    .glass-card { background: var(--card-bg); backdrop-filter: blur(20px); border: 1px solid var(--card-border); border-radius: 24px; padding: var(--space-lg); box-shadow: var(--shadow); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    .glass-card:hover { transform: translateY(-12px); box-shadow: var(--shadow-lg); border-color: var(--accent); }

    /* Animations */
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(201, 169, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); } }
    .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
    .fade-in.visible { opacity: 1; transform: translateY(0); }

    /* Responsive */
    @media (max-width: 768px) {
      .whatsapp-btn, .back-to-top { bottom: 1rem; right: 1rem; }
      .back-to-top { bottom: 5rem; }
    }
  </style>
</head>

<body>
  <!-- Scroll Progress Bar -->
  <div class="scroll-progress"></div>

  <!-- Preloader -->
  <div class="preloader" id="preloader">
    <div class="preloader__logo">{{ shop.name }}</div>
    <div class="preloader__spinner"></div>
  </div>

  <!-- Main Content -->
  <main>{{ content_for_layout }}</main>

  <!-- WhatsApp Button -->
  <a href="https://wa.me/1234567890?text=Hi! I'm interested in your beauty products ✨" class="whatsapp-btn" target="_blank" rel="noopener">
    <svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/></svg>
  </a>

  <!-- Back to Top Button -->
  <button class="back-to-top" id="backToTop" title="Back to top">
    <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
  </button>

  <script>
    // Remove Preloader
    window.addEventListener('load', () => {
      const preloader = document.getElementById('preloader');
      preloader.classList.add('hidden');
      document.body.style.overflow = 'auto';
    });

    // Scroll Progress Bar
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset;
      const docHeight = document.body.offsetHeight - window.innerHeight;
      const scrollPercent = scrollTop / docHeight;
      document.querySelector('.scroll-progress').style.width = scrollPercent * 100 + '%';
    });

    // Back to Top Button
    const backToTop = document.getElementById('backToTop');
    window.addEventListener('scroll', () => {
      if (window.pageYOffset > 500) {
        backToTop.classList.add('show');
      } else {
        backToTop.classList.remove('show');
      }
    });
    backToTop.addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    // Custom Magnetic Cursor
    const cursor = document.createElement('div');
    const cursorFollower = document.createElement('div');
    cursor.className = 'cursor';
    cursorFollower.className = 'cursor-follower';
    document.body.appendChild(cursor);
    document.body.appendChild(cursorFollower);

    let mouseX = 0, mouseY = 0;
    let cursorX = 0, cursorY = 0;

    document.addEventListener('mousemove', (e) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
      
      cursor.style.left = mouseX + 'px';
      cursor.style.top = mouseY + 'px';
      
      cursorX = mouseX - 20;
      cursorY = mouseY - 20;
    });

    // Magnetic effect on hover elements
    document.querySelectorAll('a, button, .glass-card').forEach(el => {
      el.addEventListener('mouseenter', () => {
        cursor.classList.add('hover');
        cursorFollower.classList.add('hover');
      });
      el.addEventListener('mouseleave', () => {
        cursor.classList.remove('hover');
        cursorFollower.classList.remove('hover');
      });
      
      el.addEventListener('mousemove', (e) => {
        const rect = el.getBoundingClientRect();
        const x = rect.left + rect.width / 2;
        const y = rect.top + rect.height / 2;
        const centerX = x - mouseX;
        const centerY = y - mouseY;
        const distance = Math.sqrt(centerX ** 2 + centerY ** 2);
        const maxDistance = Math.max(rect.width, rect.height) / 2;
        const force = Math.max(0, (maxDistance - distance) / maxDistance) * 0.15;
        
        cursor.style.transform = `translate(${centerX * force}px, ${centerY * force}px) scale(1.5)`;
      });
    });

    // GSAP ScrollTrigger Initialization
    gsap.registerPlugin(ScrollTrigger);
    gsap.defaults({ ease: "power3.out" });

    // Fade in animations for elements with .fade-in class
    gsap.utils.toArray(".fade-in").forEach((el, i) => {
      gsap.fromTo(el, 
        { opacity: 0, y: 50 },
        {
          opacity: 1,
          y: 0,
          duration: 1,
          scrollTrigger: {
            trigger: el,
            start: "top 85%",
            toggleActions: "play none none reverse"
          }
        }
      );
    });

    // VanillaTilt initialization for cards
    VanillaTilt.init(document.querySelector