@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap");

:root{
  --gold: oklch(0.78 0.14 85);        /* rich premium gold */
  --gold-soft: oklch(0.92 0.05 85);   /* soft champagne gold */
  --cream: oklch(0.98 0.01 85);       /* elegant ivory background */
  --ink: oklch(0.16 0.01 60);         /* deep luxury black */
  --accent: oklch(0.82 0.10 75);      /* highlight gold glow */
  --border: oklch(0.90 0.02 85);      /* subtle warm border */
}
*{border-color:var(--border)}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;margin:0}
h1,h2,h3,h4,.font-display{font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

.container-luxe{max-width:80rem;margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem}
@media(min-width:640px){.container-luxe{padding-left:2rem;padding-right:2rem}}
@media(min-width:1024px){.container-luxe{padding-left:3rem;padding-right:3rem}}
.section-padding{padding-top:5rem;padding-bottom:5rem}
@media(min-width:768px){.section-padding{padding-top:7rem;padding-bottom:7rem}}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.75rem;font-size:.875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;background:var(--ink);color:var(--cream);border:1px solid var(--ink);transition:all .5s;border-radius: 20px;}
.btn-primary:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 18px 40px -15px oklch(0.74 0.13 85 / 0.6)}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.75rem;font-size:.875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;background:transparent;border:1px solid currentColor;transition:all .5s;border-radius: 20px;}
.btn-outline:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.75rem;font-size:.875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;background:var(--gold);color:var(--ink);border:1px solid var(--gold);transition:all .5s;border-radius: 20px;}
.btn-gold:hover{background:transparent;color:var(--gold);box-shadow:0 18px 40px -15px oklch(0.74 0.13 85 / 0.7)}
.img-div{background:color-mix(in oklab,var(--cream) 99%,transparent);backdrop-filter:blur(8px);border-radius: 20px;}
.card-luxury{background:#fff;border:1px solid color-mix(in oklab,var(--border) 60%,transparent);transition:all .7s;border-radius: 20px;}
.card-luxury:hover{box-shadow:0 30px 60px -25px oklch(0.18 0.012 60 / 0.25);transform:translateY(-4px)}
img{    border-radius: 20px;}
.glass-navbar{background:color-mix(in oklab,var(--cream) 75%,transparent);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid color-mix(in oklab,var(--gold) 20%,transparent)}
.shadow-gold{box-shadow:0 25px 50px -20px oklch(0.74 0.13 85 / 0.45)}
.email-input{    padding: 10px;border-radius: 20px;}
.eyebrow{display:inline-flex;align-items:center;gap:.75rem;font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-weight:500}
.eyebrow::before,.eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.eyebrow.left::after{display:none}

.gold-divider{height:1px;width:4rem;background:var(--gold);margin-left:auto;margin-right:auto}

.luxe-link{position:relative;display:inline-block;transition:color .3s}
.luxe-link::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s ease}
.luxe-link:hover::after{transform:scaleX(1);transform-origin:left}

.product-img-wrap{position:relative;overflow:hidden;background:oklch(0.94 0.014 85);aspect-ratio:4/5}
.product-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease-out}
.group:hover .product-img-wrap img{transform:scale(1.08)}

@keyframes fade-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.animate-fade-up{animation:fade-up .9s ease-out both}
.animate-fade-in{animation:fade-in 1s ease-out both}

.qa-btn{position:absolute;left:1rem;right:1rem;bottom:1rem;background:var(--ink);color:var(--cream);font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;padding:.75rem 0;display:flex;align-items:center;justify-content:center;gap:.5rem;opacity:0;transform:translateY(.75rem);transition:all .5s;border:0;cursor:pointer}
.group:hover .qa-btn{opacity:1;transform:translateY(0)}
.qa-btn:hover{background:var(--gold);color:var(--ink)}
.heart-btn-fl{position:absolute;top:1rem;right:1rem;height:2.5rem;width:2.5rem;border-radius:9999px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:var(--ink);opacity:0;transform:translateY(.5rem);transition:all .5s;border:0;cursor:pointer}
.group:hover .heart-btn-fl{opacity:1;transform:translateY(0)}
.heart-btn-fl:hover{background:var(--gold)}

.scroll-top{position:fixed;bottom:1.5rem;right:1.5rem;z-index:40;height:3rem;width:3rem;border-radius:9999px;background:var(--gold);color:var(--ink);display:none;align-items:center;justify-content:center;border:0;box-shadow:0 25px 50px -20px oklch(0.74 0.13 85 / 0.45);transition:transform .3s}
.scroll-top.show{display:flex}
.scroll-top:hover{transform:scale(1.1)}

.bg-cream{background:var(--cream)}
.bg-ink{background:var(--ink)}
.bg-accent-30{background:color-mix(in oklab,var(--accent) 30%,transparent)}
.bg-accent-40{background:color-mix(in oklab,var(--accent) 40%,transparent)}
.text-gold{color:var(--gold)}
.text-ink{color:var(--ink)}
.text-cream{color:var(--cream)}

input,textarea,select{font:inherit;color:inherit;background:transparent;border:1px solid color-mix(in oklab,var(--ink) 20%,transparent);padding:.875rem 1rem;width:100%;outline:none;transition:border-color .3s}
input:focus,textarea:focus,select:focus{border-color:var(--gold)}

    /* ===== PRELOADER ===== */
    #preloader {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--cream);
      transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.65s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: all;
    }

    #preloader.fade-out {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    #preloader.removed {
      display: none;
    }

    .preloader-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    /* Ring container */
    .preloader-ring-wrap {
      position: relative;
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Outer ring */
    .preloader-ring {
      width: 64px;
      height: 64px;
      border: 2.5px solid var(--gold);
      border-radius: 50%;
      animation: ringBreathe 2.2s ease-in-out infinite;
      position: absolute;
    }

    /* Inner diamond */
    .preloader-diamond {
      width: 10px;
      height: 10px;
      background: var(--gold);
      transform: rotate(45deg);
      animation: diamondSparkle 1.6s ease-in-out infinite;
      position: relative;
      z-index: 2;
    }

    /* Subtle glow behind ring */
    .preloader-glow {
      position: absolute;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(197, 164, 78, 0.25) 0%, transparent 70%);
      animation: glowPulse 2.2s ease-in-out infinite;
    }

    /* Brand name */
    .preloader-brand {
      font-family: 'Cormorant Garamond', 'Georgia', serif;
      font-size: 1.35rem;
      letter-spacing: 0.22em;
      color: var(--ink);
      margin-top: 1.4rem;
      animation: textFadeIn 1.8s ease-out both;
      animation-delay: 0.35s;
    }

    /* Subtitle */
    .preloader-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 0.6rem;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: color-mix(in oklab, var(--ink) 50%, transparent);
      margin-top: 0.5rem;
      animation: textFadeIn 1.8s ease-out both;
      animation-delay: 0.55s;
    }

    /* Decorative line */
    .preloader-line {
      width: 48px;
      height: 1px;
      background: var(--gold);
      margin-top: 1rem;
      opacity: 0;
      animation: lineReveal 1.4s ease-out both;
      animation-delay: 0.7s;
    }

    /* Keyframes */
    @keyframes ringBreathe {

      0%,
      100% {
        transform: scale(0.88);
        box-shadow: 0 0 0 0 rgba(197, 164, 78, 0.35);
      }

      50% {
        transform: scale(1.05);
        box-shadow: 0 0 28px 6px rgba(197, 164, 78, 0.12);
      }
    }

    @keyframes diamondSparkle {

      0%,
      100% {
        transform: rotate(45deg) scale(0.85);
        opacity: 0.5;
      }

      50% {
        transform: rotate(45deg) scale(1.35);
        opacity: 1;
      }
    }

    @keyframes glowPulse {

      0%,
      100% {
        opacity: 0.35;
        transform: scale(0.8);
      }

      50% {
        opacity: 1;
        transform: scale(1.25);
      }
    }

    @keyframes textFadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes lineReveal {
      from {
        opacity: 0;
        width: 0;
      }

      to {
        opacity: 0.7;
        width: 48px;
      }
    }

    /* Mobile adjustments */
    @media (max-width: 640px) {
      .preloader-ring-wrap {
        width: 56px;
        height: 56px;
      }

      .preloader-ring {
        width: 50px;
        height: 50px;
        border-width: 2px;
      }

      .preloader-diamond {
        width: 8px;
        height: 8px;
      }

      .preloader-glow {
        width: 54px;
        height: 54px;
      }

      .preloader-brand {
        font-size: 1.1rem;
        letter-spacing: 0.18em;
      }

      .preloader-subtitle {
        font-size: 0.55rem;
        letter-spacing: 0.25em;
      }
    }

    input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
textarea {padding: 10px;border-radius: 10px;}
  select{padding: 10px !important;border-radius: 10px;}  
  /* ===== Background Effects ===== */
  .blur-gold-15 {
    background: color-mix(in oklab, var(--gold) 15%, transparent);
    filter: blur(120px);
  }

  .blur-gold-10 {
    background: color-mix(in oklab, var(--gold) 10%, transparent);
    filter: blur(120px);
  }

  /* ===== Lines & Borders ===== */
  .gold-top-line {
    background: linear-gradient(to right, transparent, color-mix(in oklab, var(--gold) 60%, transparent), transparent);
  }

  .footer-border-bottom {
    border-bottom: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
  }

  .gold-line-small {
    background: color-mix(in oklab, var(--gold) 60%, transparent);
  }

  .gold-line-fade {
    background: linear-gradient(to right, transparent, color-mix(in oklab, var(--gold) 40%, transparent), transparent);
  }

  /* ===== Text Colors ===== */
  .text-cream-75 {
    color: color-mix(in oklab, var(--cream) 75%, transparent);
  }

  .text-cream-70 {
    color: color-mix(in oklab, var(--cream) 70%, transparent);
  }

  .text-cream-65 {
    color: color-mix(in oklab, var(--cream) 65%, transparent);
  }

  .text-cream-45 {
    color: color-mix(in oklab, var(--cream) 45%, transparent);
  }

  /* ===== Newsletter ===== */
  .newsletter-form {
    border: 1px solid color-mix(in oklab, var(--cream) 20%, transparent);
    background: color-mix(in oklab, var(--cream) 3%, transparent);
  }

  .newsletter-input {
    border: 0;
    padding: 1rem 1.25rem;
    background: transparent;
    outline: none;
  }

  /* ===== Social Icons ===== */
  .social-icon {
    border: 1px solid color-mix(in oklab, var(--cream) 15%, transparent);
    color: color-mix(in oklab, var(--cream) 70%, transparent);
  }

  /* ===== Misc ===== */
  .gold-border-soft {
    border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  }

   /* FAQ accordion styling */
        .faq details {
            border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
        }
        .faq details summary {
            cursor: pointer;
            padding: 1.5rem 0;
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.4rem;
            color: var(--ink);
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: color 0.3s ease;
        }
        .faq details summary::-webkit-details-marker {
            display: none;
        }
        .faq details summary::after {
            content: '+';
            font-size: 1.8rem;
            font-weight: 300;
            color: var(--gold);
            transition: transform 0.3s ease;
            line-height: 1;
        }
        .faq details[open] summary::after {
            content: '–';
            transform: rotate(180deg);
        }
        .faq details summary:hover {
            color: var(--gold);
        }
        .faq details .faq-answer {
            padding-bottom: 1.5rem;
            color: color-mix(in oklab, var(--ink) 70%, transparent);
            line-height: 1.7;
            font-size: 1rem;
        }

         /* Form toggle animation */
        .form-panel {
            transition: opacity 0.45s ease, transform 0.45s ease;
        }
        .form-panel.hidden-panel {
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none;
            position: absolute;
            width: 100%;
        }
        .form-container {
            position: relative;
            overflow: hidden;
        }