*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --cream: #F9F5EF;
      --warm-white: #FDFAF6;
      --sand: #E8DDD0;
      --taupe: #C4B09A;
      --brown: #8B6F5C;
      --dark: #2C2218;
      --gold: #C9A96E;
      --gold-light: #E8D5B0;
      --text: #3D2B1F;
      --text-muted: #8B7D74;
    }
    html { scroll-behavior: smooth; }
    body { font-family: 'Jost', sans-serif; background: var(--warm-white); color: var(--text); font-size: 18px; font-weight: 300; overflow-x: hidden; }

    /* NAV */
    nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 24px 48px; background: transparent; transition: background 0.4s, padding 0.4s; }
    nav.scrolled { background: rgba(253,250,246,0.96); backdrop-filter: blur(10px); padding: 16px 48px; box-shadow: 0 1px 20px rgba(0,0,0,0.06); }
    .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 500; letter-spacing: 0.08em; color: var(--warm-white); text-decoration: none; transition: color 0.4s; }
    nav.scrolled .nav-logo { color: var(--dark); }
    .nav-links { display: flex; gap: 36px; list-style: none; }
    .nav-links a { font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.3s; }
    nav.scrolled .nav-links a { color: var(--text-muted); }
    .nav-links a:hover { color: var(--gold); }

    /* HERO */
    .hero { min-height: 100vh; display: flex; align-items: center; position: relative; background: linear-gradient(135deg, #1a1208 0%, #2C2218 40%, #3d2e1e 70%, #1a1208 100%); overflow: hidden; }
    .hero-bg { position: absolute; inset: 0; background-image: radial-gradient(ellipse 600px 400px at 80% 50%, rgba(201,169,110,0.12) 0%, transparent 70%), radial-gradient(ellipse 300px 300px at 20% 80%, rgba(201,169,110,0.06) 0%, transparent 70%); }
    
    .hero-label { display: inline-block; font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; border-bottom: 1px solid rgba(201,169,110,0.4); padding-bottom: 8px; }
    .hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(44px, 5.5vw, 80px); font-weight: 300; line-height: 1.05; color: #F9F5EF; margin-bottom: 12px; }
    .hero-title em { font-style: italic; color: var(--gold-light); }
    .hero-subtitle { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 300; font-style: italic; color: rgba(201,169,110,0.7); margin-bottom: 32px; }
    .hero-desc { font-size: 18px; line-height: 1.8; color: rgba(249,245,239,0.65); max-width: 440px; margin-bottom: 48px; }
    .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
    .btn-primary { display: inline-block; padding: 16px 40px; background: var(--gold); color: var(--dark); font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--gold); border-radius: 50px; transition: all 0.3s; }
    .btn-primary:hover { background: transparent; color: var(--gold); }
    .btn-outline { display: inline-block; padding: 16px 40px; background: transparent; color: rgba(249,245,239,0.8); font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(249,245,239,0.25); border-radius: 50px; transition: all 0.3s; }
    .btn-outline:hover { border-color: var(--gold); color: var(--gold); }
    .hero-visual { display: flex; justify-content: center; align-items: center; }
    .hero-ornament { width: 340px; height: 340px; position: relative; }
    .hero-ornament svg { width: 100%; height: 100%; opacity: 0.25; }
    .hero-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 90px; filter: drop-shadow(0 0 30px rgba(201,169,110,0.5)); }
    .hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(249,245,239,0.3); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
    .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(201,169,110,0.5), transparent); animation: pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:0.3} 50%{opacity:1} }

    /* SHARED */
    .section-label { display: inline-block; font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
    .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 3.5vw, 48px); font-weight: 400; line-height: 1.15; color: var(--dark); }
    .section-title em { font-style: italic; color: var(--brown); }
    .section-header { text-align: center; margin-bottom: 64px; }
    .divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 60px; max-width: 300px; }
    .divider::before,.divider::after { content:''; flex:1; height:1px; background: linear-gradient(to right, transparent, var(--taupe)); }
    .divider::after { background: linear-gradient(to left, transparent, var(--taupe)); }
    .divider span { color: var(--gold); font-size: 16px; }

    /* FEATURES */
    .features { padding: 100px 48px; background: var(--cream); }
    .features-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; max-width: 1200px; margin: 0 auto; }
    .feat-card { background: var(--warm-white); padding: 48px 32px; text-align: center; transition: background 0.3s; }
    .feat-card:hover { background: white; }
    .feat-icon { font-size: 42px; margin-bottom: 20px; display: block; }
    .feat-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--dark); margin-bottom: 12px; }
    .feat-text { font-size: 18px; line-height: 1.7; color: var(--text-muted); }

    /* ABOUT */
    .about { padding: 100px 48px; background: var(--warm-white); }
    .about-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
    .about-frame { width: 100%; aspect-ratio: 3/4; background: linear-gradient(135deg, var(--sand), var(--cream)); display: flex; align-items: center; justify-content: center; position: relative; }
    .about-frame::before { content:''; position: absolute; inset: 16px; border: 1px solid rgba(201,169,110,0.3); pointer-events: none; }
    .about-frame span { font-size: 125px; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.1)); }
    .about-badge { position: absolute; bottom: -20px; right: -20px; width: 120px; height: 120px; background: var(--dark); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gold); }
    .about-badge-num { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; line-height: 1; }
    .about-badge-text { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(201,169,110,0.7); text-align: center; margin-top: 4px; }
    .about-vis { position: relative; }
    .about-text p { font-size: 18px; line-height: 1.85; color: var(--text-muted); margin-bottom: 20px; }
    .about-text p:first-of-type { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; font-style: italic; color: var(--text); line-height: 1.6; }
    .about-sig { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-style: italic; color: var(--gold); margin-top: 32px; }

    /* FRAGRANCES */
    .fragrances { padding: 100px 48px; background: var(--dark); }
    .fragrances .section-title { color: var(--cream); }
    .fragrances .section-title em { color: var(--gold-light); }
    .frag-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,0.05); }
    .frag-cat { background: rgba(44,34,24,0.8); padding: 40px 32px; transition: background 0.3s; }
    .frag-cat:hover { background: rgba(60,45,30,0.9); }
    .frag-cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(201,169,110,0.2); }
    .frag-cat-head span:first-child { font-size: 24px; }
    .frag-cat-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; color: var(--gold-light); }
    .frag-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .frag-list li { font-size: 16px; color: rgba(249,245,239,0.6); padding-left: 12px; position: relative; line-height: 1.4; }
    .frag-list li::before { content:''; position: absolute; left:0; top:7px; width:4px; height:1px; background: var(--gold); }

    /* PRODUCTS */
    .products { padding: 100px 48px; background: var(--cream); }




    .prod-body { padding: 20px 20px 24px; display: flex; flex-direction: column; flex: 1; }
    .prod-name { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 500; color: var(--dark); margin-bottom: 8px; }
    .prod-desc { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin-bottom: 20px; flex: 1; }
    .prod-btn { display: inline-block; padding: 12px 28px; background: var(--dark); color: var(--gold-light); font-size: 13px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--dark); border-radius: 50px; transition: all 0.3s; }
    .prod-btn:hover { background: transparent; color: var(--dark); }

    /* GALLERY */
    .gallery { padding: 100px 48px; background: var(--warm-white); }
    
    .gallery-ig { text-align: center; margin-top: 48px; }
    .gallery-ig a { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brown); text-decoration: none; border-bottom: 1px solid var(--taupe); padding-bottom: 4px; transition: all 0.3s; }
    .gallery-ig a:hover { color: var(--gold); border-color: var(--gold); }

    /* GALLERY GRID */
    .gallery-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .gal-item { overflow: hidden; cursor: pointer; aspect-ratio: 1/1; }
    .gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
    .gal-item:hover img { transform: scale(1.05); }
    @media (max-width: 900px) {
      .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
    }

    /* SUBSCRIBE */
    .subscribe { padding: 100px 48px; background: linear-gradient(135deg, #1a1208, #2C2218); text-align: center; position: relative; overflow: hidden; }
    .subscribe::before { content:''; position: absolute; top:-100px; left:50%; transform: translateX(-50%); width:600px; height:400px; background: radial-gradient(ellipse, rgba(201,169,110,0.1), transparent 70%); pointer-events: none; }
    .sub-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
    .subscribe .section-title { color: var(--cream); margin-bottom: 20px; }
    .subscribe .section-title em { color: var(--gold-light); }
    .sub-desc { font-size: 18px; line-height: 1.75; color: rgba(249,245,239,0.55); margin-bottom: 48px; }
    .sub-form { display: flex; max-width: 480px; margin: 0 auto 16px; }
    .sub-input { flex:1; padding: 18px 24px; background: rgba(249,245,239,0.06); border: 1px solid rgba(201,169,110,0.25); border-right: none; border-radius: 50px 0 0 50px; color: var(--cream); font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 300; outline: none; transition: border-color 0.3s; }
    .sub-input::placeholder { color: rgba(249,245,239,0.3); }
    .sub-input:focus { border-color: rgba(201,169,110,0.6); }
    .sub-btn { padding: 18px 32px; background: var(--gold); color: var(--dark); font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid var(--gold); border-radius: 0 50px 50px 0; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
    .sub-btn:hover { background: transparent; color: var(--gold); }
    .sub-note { font-size: 15px; color: rgba(249,245,239,0.3); letter-spacing: 0.05em; }
    .sub-success { display: none; padding: 20px; background: rgba(201,169,110,0.12); border: 1px solid rgba(201,169,110,0.3); color: var(--gold-light); font-family: 'Cormorant Garamond', serif; font-size: 22px; font-style: italic; }

    /* CARE */
    .care { padding: 80px 48px; background: var(--cream); }
    .care-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
    .care-card { background: var(--warm-white); padding: 32px 24px; border-top: 2px solid transparent; transition: border-color 0.3s; }
    .care-card:hover { border-color: var(--gold); }
    .care-icon { font-size: 28px; margin-bottom: 16px; }
    .care-title { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 500; color: var(--dark); margin-bottom: 10px; }
    .care-text { font-size: 16px; line-height: 1.7; color: var(--text-muted); }

    /* FOOTER */
    footer { padding: 48px; background: var(--dark); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
    .foot-logo { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--gold-light); font-weight: 400; letter-spacing: 0.05em; }
    .foot-tag { font-size: 15px; color: rgba(249,245,239,0.3); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; }
    .foot-links { display: flex; gap: 28px; list-style: none; }
    .foot-links a { font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(249,245,239,0.4); text-decoration: none; transition: color 0.3s; }
    .foot-links a:hover { color: var(--gold); }
    .foot-copy { font-size: 15px; color: rgba(249,245,239,0.2); }

    @media (max-width: 900px) {
      nav { padding: 20px 24px; }
      .nav-links { display: none; }
      
      .hero-desc { margin: 0 auto 40px; }
      .hero-cta { justify-content: center; }
      .features,.about,.fragrances,.products,.gallery,.subscribe,.care { padding: 60px 24px; }
      .features-grid { grid-template-columns: 1fr 1fr; }
      .about-inner { grid-template-columns: 1fr; gap: 48px; }
      .about-badge { right: 0; }
      .frag-grid { grid-template-columns: 1fr; }
  
      
          .sub-form { flex-direction: column; }
      .sub-input { border-right: 1px solid rgba(201,169,110,0.25); border-bottom: none; }
      .sub-btn { width: 100%; }
      .care-grid { grid-template-columns: 1fr 1fr; }
      footer { padding: 32px 24px; flex-direction: column; text-align: center; }
      .foot-links { flex-wrap: wrap; justify-content: center; }
    }
  
    #lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.93);z-index:9999;align-items:center;justify-content:center;}
    #lightbox.active{display:flex;}
    #lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
    .lb-x{position:absolute;top:20px;right:28px;color:rgba(255,255,255,0.7);font-size:42px;cursor:pointer;line-height:1;z-index:10001;}
    .lb-x:hover{color:#fff;}
    .lb-arr{position:absolute;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.6);font-size:56px;cursor:pointer;padding:12px 20px;z-index:10001;user-select:none;line-height:1;transition:color 0.2s;}
    .lb-arr:hover{color:var(--gold);}
    .lb-l{left:6px;}.lb-r{right:6px;}
    .lb-n{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.4);font-size:13px;letter-spacing:0.1em;}

    .float-btn{position:fixed;right:28px;bottom:28px;z-index:500;display:inline-flex;align-items:center;gap:10px;padding:13px 26px;background:var(--gold);color:var(--dark);font-family:'Jost',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;border-radius:50px;box-shadow:0 4px 24px rgba(0,0,0,0.3);transition:all 0.3s;}
    .float-btn:hover{background:var(--dark);color:var(--gold);}
    @media(max-width:900px){.float-btn{right:0;left:0;bottom:0;border-radius:0;justify-content:center;padding:15px;font-size:15px;box-shadow:0 -2px 16px rgba(0,0,0,0.2);}}
  
    /* HERO FULLSCREEN */
    .hero { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; }
    .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; z-index: 0; }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(20,12,5,0.82) 0%, rgba(20,12,5,0.65) 45%, rgba(20,12,5,0.25) 75%, rgba(20,12,5,0.1) 100%); z-index: 1; }
    .hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 140px 48px 100px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
    .hero-text { max-width: 540px; }
    @media (max-width: 900px) {
      .hero-bg-img { object-position: 70% center; }
      .hero-overlay { background: linear-gradient(to bottom, rgba(20,12,5,0.7) 0%, rgba(20,12,5,0.55) 60%, rgba(20,12,5,0.4) 100%); }
      .hero-content { padding: 120px 24px 80px; align-items: center; text-align: center; }
      .hero-cta { justify-content: center; }
      .hero-desc { margin: 0 auto 40px; }
      .hero-text { max-width: 100%; }
    }

    

    /* PRODUCTS CART STYLE */
    /* Products scroll */
    .products-scroll-wrap { max-width: 1200px; margin: 0 auto; overflow: hidden; }
    .products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
    @media (max-width: 900px) {
      .products-scroll-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 0 24px 16px; margin: 0 -24px; scrollbar-width: none; }
      .products-scroll-wrap::-webkit-scrollbar { display: none; }
      .products-grid { grid-template-columns: repeat(4, 72vw); gap: 16px; width: max-content; padding-right: 24px; }
      .prod-card { scroll-snap-align: start; }
    }
    .prod-card { background: var(--warm-white); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 20px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }
    .prod-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
    .prod-img { width:100%; aspect-ratio: 3/4; overflow: hidden; background: linear-gradient(135deg, var(--sand), var(--taupe)); }
    .prod-img img { width:100%; height:100%; object-fit:cover; display:block; transition: transform 0.4s; }
    .prod-card:hover .prod-img img { transform: scale(1.04); }
    .prod-badge { display: inline-block; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,169,110,0.4); border-radius: 50px; padding: 3px 10px; margin-bottom: 10px; }
    .prod-price { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--brown); margin-bottom: 16px; }