/* ═══════════════════════════════════════════════════════════
   RANAIN FRAGRANCE — Global Stylesheet
   ═══════════════════════════════════════════════════════════ */

:root {
  --black:   #080808;
  --dark:    #0f0f0f;
  --card:    #141414;
  --card2:   #1a1a1a;
  --gold:    #C9A84C;
  --gold2:   #E8C97A;
  --gold3:   #8B6914;
  --cream:   #F5EDD6;
  --white:   #FAFAF8;
  --muted:   #888880;
  --border:  rgba(201,168,76,0.15);
  --border2: rgba(201,168,76,0.08);
  --radius:  0px;
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--black);
  color: var(--cream);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; }
ul { list-style:none; }
input, textarea, select {
  font-family: 'Jost', sans-serif;
  background: transparent;
  color: var(--cream);
}

/* ── CURSOR ─────────────────────────────────────────────── */
body { cursor: none; }
.cursor {
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s;
  will-change: transform;
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid rgba(201,168,76,0.6);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, border-color 0.3s;
  will-change: transform;
}
.cursor.hover { width:12px; height:12px; background:var(--gold2); }
.cursor-ring.hover { width:48px; height:48px; border-color:rgba(201,168,76,0.4); }
@media (hover:none) {
  body { cursor:auto; }
  .cursor, .cursor-ring { display:none; }
}

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
.font-display { font-family: 'Cormorant Garamond', serif; }
.font-cinzel  { font-family: 'Cinzel', serif; }
h1,h2,h3 { font-family:'Cormorant Garamond',serif; font-weight:300; }

/* ── UTILITIES ──────────────────────────────────────────── */
.gold { color: var(--gold); }
.muted { color: var(--muted); }
.gold-line { width:50px; height:1px; background:var(--gold); margin:20px 0; }
.container { max-width:1380px; margin:0 auto; padding:0 60px; }
.text-center { text-align:center; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.75s ease, transform 0.75s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.d1{transition-delay:0.1s} .d2{transition-delay:0.2s} .d3{transition-delay:0.3s} .d4{transition-delay:0.4s}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px 36px;
  transition: all 0.3s;
  cursor: none;
  border: none;
}
.btn-gold { background:var(--gold); color:var(--black); }
.btn-gold:hover { background:var(--gold2); }
.btn-outline { background:transparent; border:1px solid var(--gold); color:var(--gold); }
.btn-outline:hover { background:var(--gold); color:var(--black); }
.btn-ghost {
  display: inline-flex; align-items:center; gap:10px;
  font-family:'Jost',sans-serif; font-size:10px;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--cream); opacity:0.65; cursor:none;
  background:none; border:none; transition:opacity 0.3s;
}
.btn-ghost:hover { opacity:1; }
.btn-ghost::after { content:'→'; font-size:15px; transition:transform 0.3s; }
.btn-ghost:hover::after { transform:translateX(4px); }

/* ── SECTION LABELS ─────────────────────────────────────── */
.sec-label {
  font-family:'Jost',sans-serif; font-size:9px;
  letter-spacing:5px; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:14px;
  margin-bottom:14px;
}
.sec-label::before { content:''; width:28px; height:1px; background:var(--gold); }
.sec-label.centered { justify-content:center; }
.sec-label.centered::before { display:none; }
.sec-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(38px,5vw,68px);
  font-weight:300; line-height:1; letter-spacing:-1px;
}

/* ══════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════ */
.navbar {
  position: fixed; top:0; left:0; right:0; padding-top: env(safe-area-inset-top, 0px);
  z-index: 900;
  padding: 22px 60px;
  display: flex; align-items:center; justify-content:space-between;
  background: linear-gradient(to bottom, rgba(8,8,8,0.97), transparent);
  transition: all 0.4s ease;
}
.navbar.scrolled {
  background: rgba(8,8,8,0.98);
  padding: 14px 60px;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
}
.nav-logo img { height:48px; width:auto; display:block; }
.nav-links { display:flex; gap:40px; }
.nav-links a {
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--cream); opacity:0.65; transition:opacity 0.3s, color 0.3s;
}
.nav-links a:hover, .nav-links a.active { opacity:1; color:var(--gold); }
.nav-right { display:flex; gap:10px; align-items:center; }
.nav-wa {
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--border);
  padding:9px 18px; transition:border-color 0.3s;
}
.nav-wa:hover { border-color:var(--gold); }
.nav-cart {
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:3px;
  text-transform:uppercase; color:var(--gold); background:transparent;
  padding:10px 24px; border:1px solid var(--gold); cursor:none; transition:all 0.3s;
}
.nav-cart:hover { background:var(--gold); color:var(--black); }
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:none; padding:4px;
}
.nav-hamburger span {
  width:24px; height:1px; background:var(--cream); display:block;
  transition:all 0.3s;
}

/* Mobile menu */
.mobile-menu {
  position:fixed; inset:0; background:rgba(8,8,8,0.98);
  z-index:950; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:32px;
  transform:translateX(100%); transition:transform 0.4s ease;
}
.mobile-menu.open { transform:translateX(0); }
.mobile-menu a {
  font-family:'Cinzel',serif; font-size:20px; letter-spacing:4px;
  text-transform:uppercase; color:var(--cream); opacity:0.7;
  transition:opacity 0.3s, color 0.3s;
}
.mobile-menu a:hover { opacity:1; color:var(--gold); }
.mobile-close {
  position:absolute; top:24px; right:28px;
  background:none; border:none; color:var(--cream);
  font-size:26px; cursor:none; opacity:0.6;
}
.mobile-close:hover { opacity:1; }
.mobile-logo { margin-bottom:20px; }
.mobile-logo img { height:44px; width:auto; }

/* ══════════════════════════════════════════════════════════
   CART DRAWER
   ══════════════════════════════════════════════════════════ */
.cart-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  z-index:800; opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.cart-overlay.open { opacity:1; pointer-events:all; }
.cart-drawer {
  position:fixed; right:0; top:0; bottom:0; width:400px;
  background:var(--dark); border-left:1px solid var(--border);
  z-index:810; transform:translateX(100%);
  transition:transform 0.4s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open { transform:translateX(0); }
.cart-head {
  padding:26px 28px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  flex-shrink:0;
}
.cart-head-title { font-family:'Cinzel',serif; font-size:12px; letter-spacing:3px; color:var(--gold); }
.cart-x { background:none; border:none; color:var(--cream); font-size:22px; cursor:none; opacity:0.55; transition:opacity 0.3s; }
.cart-x:hover { opacity:1; }
.cart-body { flex:1; overflow-y:auto; padding:20px 28px; }
.cart-empty { text-align:center; padding:60px 20px; color:var(--muted); font-size:13px; line-height:2; }
.cart-item { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border2); }
.ci-info { flex:1; }
.ci-name { font-family:'Cormorant Garamond',serif; font-size:18px; color:var(--white); margin-bottom:3px; }
.ci-size { font-size:10px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
.ci-price { font-family:'Cormorant Garamond',serif; font-size:16px; color:var(--gold); }
.ci-remove { background:none; border:none; color:var(--muted); font-size:18px; cursor:none; align-self:flex-start; transition:color 0.3s; }
.ci-remove:hover { color:var(--cream); }
.cart-foot { padding:20px 28px 24px; border-top:1px solid var(--border); flex-shrink:0; }
.cart-total-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.cart-total-label { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.cart-total-amt { font-family:'Cormorant Garamond',serif; font-size:28px; color:var(--gold); }
.cart-checkout { width:100%; padding:15px; background:var(--gold); color:var(--black); font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; border:none; cursor:none; margin-bottom:10px; transition:background 0.3s; }
.cart-checkout:hover { background:var(--gold2); }
.cart-wa { width:100%; padding:12px; background:transparent; border:1px solid #25D366; color:#25D366; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; cursor:none; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.3s; }
.cart-wa:hover { background:#25D366; color:var(--black); }

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
footer {
  background: var(--dark);
  border-top: 1px solid var(--border);
  padding: 80px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding: 0 60px 60px;
  border-bottom: 1px solid var(--border);
}
.footer-logo img { height:52px; width:auto; margin-bottom:20px; }
.footer-brand p { font-size:12px; line-height:1.9; color:var(--muted); max-width:280px; }
.footer-contact { margin-top:20px; font-size:12px; color:var(--muted); line-height:2.2; }
.footer-contact a { color:var(--muted); transition:color 0.3s; }
.footer-contact a:hover { color:var(--gold); }
.footer-col h4 { font-family:'Cinzel',serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:22px; }
.footer-col li { margin-bottom:11px; }
.footer-col a { font-size:12px; color:var(--muted); transition:color 0.3s; }
.footer-col a:hover { color:var(--gold); }
.footer-bottom {
  padding:24px 60px;
  display:flex; justify-content:space-between; align-items:center;
}
.footer-copy { font-size:11px; color:rgba(136,136,128,0.4); letter-spacing:1px; }
.footer-social-links { display:flex; gap:22px; }
.footer-social-links a { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); transition:color 0.3s; }
.footer-social-links a:hover { color:var(--gold); }

/* ══════════════════════════════════════════════════════════
   MARQUEE
   ══════════════════════════════════════════════════════════ */
.marquee-wrap { padding:17px 0; background:var(--gold); overflow:hidden; display:flex; align-items:center; }
.marquee-track { display:flex; align-items:center; animation:marquee 30s linear infinite; white-space:nowrap; }
.marquee-track:hover { animation-play-state:paused; }
.m-item { font-family:'Cinzel',serif; font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--black); padding:0 44px; opacity:0.85; }
.m-sep { color:rgba(0,0,0,0.3); padding:0 4px; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══════════════════════════════════════════════════════════
   PRODUCT CARDS
   ══════════════════════════════════════════════════════════ */
.prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.prod-card {
  background:var(--card); position:relative; overflow:hidden;
  cursor:none; transition:transform 0.3s;
}
.prod-card:hover { transform:translateY(-3px); }
.prod-img { height:340px; overflow:hidden; position:relative; background:var(--card2); }
.prod-img img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 0.7s ease; }
.prod-card:hover .prod-img img { transform:scale(1.06); }
.prod-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(6,6,6,0.92) 0%, rgba(6,6,6,0.15) 50%, transparent 100%); }
.prod-badge { position:absolute; top:14px; right:14px; font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold); padding:3px 9px; background:rgba(8,8,8,0.75); backdrop-filter:blur(4px); }
.prod-badge.signature { background:var(--gold); color:var(--black); }
.prod-info { padding:20px 22px; border-top:1px solid var(--border); }
.prod-cat { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.prod-name { font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--white); margin-bottom:3px; }
.prod-tag { font-size:11px; color:var(--muted); margin-bottom:16px; font-style:italic; line-height:1.5; }
.prod-foot { display:flex; justify-content:space-between; align-items:center; }
.prod-price { font-family:'Cormorant Garamond',serif; font-size:19px; color:var(--gold); }
.atc-btn {
  background:transparent; border:1px solid var(--gold); color:var(--gold);
  font-family:'Jost',sans-serif; font-size:9px; letter-spacing:2px;
  text-transform:uppercase; padding:7px 13px; cursor:none; transition:all 0.3s;
}
.atc-btn:hover, .atc-btn.added { background:var(--gold); color:var(--black); }

/* Midnight King — Signature Wide Card */
.mk-card { grid-column:span 2; }
.mk-inner { display:grid; grid-template-columns:1fr 1fr; height:100%; }
.mk-img { min-height:340px; overflow:hidden; position:relative; background:var(--card2); }
.mk-img img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 0.7s; }
.mk-card:hover .mk-img img { transform:scale(1.04); }
.mk-info { display:flex; flex-direction:column; justify-content:center; padding:44px 40px; background:var(--card); border-left:1px solid var(--border); }
.mk-signature-tag { font-size:8px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); background:rgba(201,168,76,0.1); border:1px solid var(--border); padding:4px 12px; display:inline-block; margin-bottom:16px; }

/* ══════════════════════════════════════════════════════════
   TRUST + PAYMENT
   ══════════════════════════════════════════════════════════ */
.trust-section { padding:72px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); max-width:1200px; margin:0 auto; }
.trust-item { background:var(--black); padding:40px 30px; text-align:center; }
.t-icon { margin-bottom:18px; display:flex; justify-content:center; }
.t-title { font-family:'Cinzel',serif; font-size:10px; letter-spacing:2px; color:var(--gold); margin-bottom:9px; text-transform:uppercase; }
.t-desc { font-size:12px; color:var(--muted); line-height:1.8; }
.payment-section { padding:56px 0; text-align:center; background:var(--dark); border-bottom:1px solid var(--border); }
.pay-title { font-size:9px; letter-spacing:5px; text-transform:uppercase; color:var(--muted); margin-bottom:32px; }
.pay-methods { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.pay-badge { display:flex; align-items:center; gap:10px; padding:12px 22px; border:1px solid var(--border); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); transition:border-color 0.3s, color 0.3s; }
.pay-badge:hover { border-color:var(--gold); color:var(--gold); }

/* ══════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════ */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:1000; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
.modal.open { display:flex; }
.modal-box { background:var(--dark); border:1px solid var(--border); padding:48px; position:relative; max-height:88vh; overflow-y:auto; }
.modal-x { position:absolute; top:16px; right:20px; background:none; border:none; color:var(--cream); font-size:22px; cursor:none; opacity:0.5; transition:opacity 0.3s; }
.modal-x:hover { opacity:1; }

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.hero { height:100vh; min-height:600px; position:relative; display:flex; align-items:flex-start; padding-top:140px; padding-bottom:60px; }
.hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.04); animation:heroZoom 20s ease-out forwards; }
@keyframes heroZoom { from{transform:scale(1.04)} to{transform:scale(1)} }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(105deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.35) 60%, rgba(8,8,8,0.7) 100%); }
.hero-content { position:relative; z-index:2; padding:0 60px; max-width:680px; opacity:0; animation:fadeUp 1.2s ease 0.4s forwards; }
@keyframes fadeUp { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)} }
.hero-eyebrow { font-size:10px; letter-spacing:5px; text-transform:uppercase; color:var(--gold); margin-bottom:22px; display:flex; align-items:center; gap:16px; }
.hero-eyebrow::before { content:''; width:36px; height:1px; background:var(--gold); }
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(60px,8vw,110px); font-weight:300; line-height:0.9; color:var(--white); margin-bottom:28px; letter-spacing:-2px; }
.hero-title em { font-style:italic; color:var(--gold); }
.hero-desc { font-size:14px; line-height:1.9; color:rgba(245,237,214,0.6); max-width:420px; margin-bottom:44px; }
.hero-actions { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.hero-scroll { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; animation:fadeIn 1s 2.5s forwards; }
@keyframes fadeIn { to{opacity:0.45} }
.hero-scroll span { font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); }
.scroll-line { width:1px; height:52px; background:linear-gradient(to bottom,var(--gold),transparent); animation:scrollPulse 2s ease infinite; }
@keyframes scrollPulse { 0%,100%{opacity:0.3;transform:scaleY(0.8)} 50%{opacity:1;transform:scaleY(1)} }

/* ══════════════════════════════════════════════════════════
   HOME — BRAND INTRO
   ══════════════════════════════════════════════════════════ */
.brand-intro { padding:110px 60px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; max-width:1380px; margin:0 auto; }
.brand-intro-text p { font-size:15px; line-height:2; color:rgba(245,237,214,0.6); margin-top:18px; max-width:480px; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); }
.stat { background:var(--dark); padding:36px; text-align:center; }
.stat-n { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:300; color:var(--gold); line-height:1; }
.stat-l { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-top:6px; }

/* ══════════════════════════════════════════════════════════
   HOME — FEATURED SCENT
   ══════════════════════════════════════════════════════════ */
.featured { height:88vh; display:grid; grid-template-columns:55% 45%; overflow:hidden; }
.feat-img { position:relative; overflow:hidden; background:var(--card2); }
.feat-img img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 8s ease; }
.featured:hover .feat-img img { transform:scale(1.04); }
.feat-overlay { position:absolute; inset:0; background:linear-gradient(to right,transparent 60%,rgba(13,13,13,0.5) 100%); }
.feat-content { background:var(--dark); display:flex; flex-direction:column; justify-content:center; padding:72px; border-left:1px solid var(--border); }
.feat-tag { font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.feat-name { font-family:'Cormorant Garamond',serif; font-size:74px; font-weight:300; line-height:0.85; letter-spacing:-2px; color:var(--white); margin-bottom:18px; }
.feat-desc { font-size:14px; line-height:1.9; color:rgba(245,237,214,0.55); max-width:360px; margin-bottom:30px; }
.notes-row { display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap; }
.chip { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); border:1px solid var(--border); padding:5px 12px; }
.size-sel { display:flex; gap:8px; margin-bottom:24px; }
.sz-btn { padding:8px 18px; border:1px solid var(--border); background:transparent; color:var(--cream); font-family:'Jost',sans-serif; font-size:10px; letter-spacing:1px; cursor:none; transition:all 0.3s; }
.sz-btn.active, .sz-btn:hover { border-color:var(--gold); color:var(--gold); }
.feat-btns { display:flex; gap:14px; }

/* ══════════════════════════════════════════════════════════
   HOME — GROUP SHOT
   ══════════════════════════════════════════════════════════ */
.group-section { height:65vh; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.group-img { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.group-img img { width:100%; height:auto; object-fit:contain; object-position:center; }
.group-overlay { position:absolute; inset:0; background:rgba(8,8,8,0.52); }
.group-content { position:relative; z-index:2; text-align:center; padding:0 40px; }
.group-title { font-family:'Cormorant Garamond',serif; font-size:clamp(44px,7vw,92px); font-weight:300; color:var(--white); letter-spacing:-2px; line-height:1; }
.group-title em { font-style:italic; color:var(--gold); }
.group-sub { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:rgba(245,237,214,0.5); margin:14px 0 34px; }

/* ══════════════════════════════════════════════════════════
   HOME — COLLECTION
   ══════════════════════════════════════════════════════════ */
.collection-section { padding:110px 60px; max-width:1380px; margin:0 auto; }
.coll-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:52px; }
.view-all { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:8px; transition:gap 0.3s; }
.view-all:hover { gap:16px; }

/* ══════════════════════════════════════════════════════════
   HOME — QUIZ CTA
   ══════════════════════════════════════════════════════════ */
.quiz-cta { padding:110px 60px; background:var(--dark); border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center; position:relative; overflow:hidden; }
.quiz-bg-text { position:absolute; font-family:'Cinzel',serif; font-size:180px; font-weight:600; color:rgba(201,168,76,0.025); top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; }
.quiz-inner { position:relative; z-index:1; }
.quiz-title { font-family:'Cormorant Garamond',serif; font-size:clamp(42px,6vw,74px); font-weight:300; color:var(--white); margin-bottom:14px; }
.quiz-title em { font-style:italic; color:var(--gold); }
.quiz-sub { font-size:13px; color:var(--muted); margin-bottom:44px; max-width:460px; margin-left:auto; margin-right:auto; line-height:1.9; }
.quiz-steps { display:flex; justify-content:center; gap:48px; margin-bottom:44px; }
.q-step { display:flex; flex-direction:column; align-items:center; gap:10px; }
.q-num { width:46px; height:46px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:19px; color:var(--gold); }
.q-text { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }

/* ══════════════════════════════════════════════════════════
   HOME — LIFESTYLE BANNER
   ══════════════════════════════════════════════════════════ */
.lifestyle-banner { height:58vh; position:relative; display:flex; align-items:center; overflow:hidden; }
.lifestyle-banner-bg { position:absolute; inset:0; background:var(--card2); }
.lifestyle-banner-bg img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.lifestyle-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(8,8,8,0.88) 40%,rgba(8,8,8,0.2) 100%); }
.lifestyle-content { position:relative; z-index:2; padding:0 60px; max-width:580px; }
.lifestyle-quote { font-family:'Cormorant Garamond',serif; font-size:clamp(30px,4vw,50px); font-weight:300; font-style:italic; color:var(--white); line-height:1.25; margin-bottom:24px; }
.lifestyle-attr { font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); }

/* ══════════════════════════════════════════════════════════
   SHOP PAGE
   ══════════════════════════════════════════════════════════ */
.shop-hero { padding:160px 60px 60px; background:var(--dark); border-bottom:1px solid var(--border); }
.shop-filters { display:flex; gap:8px; margin-top:32px; flex-wrap:wrap; }
.filter-btn { font-family:'Jost',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:9px 20px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:none; transition:all 0.3s; }
.filter-btn.active, .filter-btn:hover { border-color:var(--gold); color:var(--gold); }
.shop-grid-section { padding:60px; max-width:1380px; margin:0 auto; }

/* ══════════════════════════════════════════════════════════
   PRODUCT PAGE
   ══════════════════════════════════════════════════════════ */
.product-hero { padding-top:90px; display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.product-gallery { position:relative; background:var(--card2); overflow:hidden; }
.product-gallery-main { width:100%; height:100%; min-height:600px; object-fit:cover; object-position:center top; }
.product-gallery-thumbs { position:absolute; bottom:20px; left:20px; display:flex; gap:8px; }
.thumb { width:56px; height:56px; object-fit:cover; opacity:0.55; cursor:none; border:1px solid transparent; transition:all 0.3s; }
.thumb.active, .thumb:hover { opacity:1; border-color:var(--gold); }
.product-info { padding:60px 64px; background:var(--dark); display:flex; flex-direction:column; justify-content:center; overflow-y:auto; }
.product-scent-cat { font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.product-name { font-family:'Cormorant Garamond',serif; font-size:clamp(52px,6vw,80px); font-weight:300; line-height:0.9; letter-spacing:-2px; color:var(--white); margin-bottom:8px; }
.product-tagline { font-size:14px; font-style:italic; color:var(--muted); margin-bottom:28px; line-height:1.6; }
.product-notes { margin-bottom:28px; }
.notes-label { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.notes-pyramid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.note-col { }
.note-col-label { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; border-bottom:1px solid var(--border2); padding-bottom:6px; }
.note-col-items { font-size:12px; color:var(--cream); line-height:1.9; opacity:0.8; }
.product-size-sel { display:flex; gap:10px; margin-bottom:24px; }
.p-sz-btn { flex:1; padding:14px; border:1px solid var(--border); background:transparent; color:var(--cream); font-family:'Jost',sans-serif; font-size:11px; cursor:none; transition:all 0.3s; text-align:center; }
.p-sz-btn.active, .p-sz-btn:hover { border-color:var(--gold); color:var(--gold); }
.p-sz-label { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.p-sz-price { font-family:'Cormorant Garamond',serif; font-size:22px; color:var(--gold); }
.product-atc { width:100%; padding:16px; background:var(--gold); color:var(--black); font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; border:none; cursor:none; margin-bottom:12px; transition:background 0.3s; }
.product-atc:hover { background:var(--gold2); }
.product-wa { width:100%; padding:13px; background:transparent; border:1px solid #25D366; color:#25D366; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; cursor:none; display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.3s; margin-bottom:24px; }
.product-wa:hover { background:#25D366; color:var(--black); }
.product-policies { display:flex; gap:20px; padding-top:20px; border-top:1px solid var(--border2); }
.policy-item { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════ */
.about-hero { padding:160px 60px 80px; background:var(--dark); border-bottom:1px solid var(--border); text-align:center; }
.about-hero p { font-size:15px; line-height:2; color:rgba(245,237,214,0.6); max-width:640px; margin:24px auto 0; }
.mvp-section { padding:100px 60px; max-width:1200px; margin:0 auto; }
.mvp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin-top:60px; }
.mvp-item { background:var(--dark); padding:48px 40px; }
.mvp-icon { font-family:'Cinzel',serif; font-size:28px; color:var(--gold); margin-bottom:16px; }
.mvp-label { font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.mvp-text { font-size:14px; line-height:1.9; color:rgba(245,237,214,0.65); }
.story-section { padding:100px 60px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; max-width:1380px; margin:0 auto; }
.story-img { height:560px; overflow:hidden; position:relative; }
.story-img img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.story-text p { font-size:15px; line-height:2; color:rgba(245,237,214,0.65); margin-bottom:18px; }
.story-quote { font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic; color:var(--gold); line-height:1.6; margin-bottom:28px; border-left:2px solid var(--gold); padding-left:20px; }
.positioning-section { padding:80px 60px; background:var(--dark); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pos-inner { max-width:900px; margin:0 auto; text-align:center; }
.pos-statement { font-family:'Cormorant Garamond',serif; font-size:clamp(24px,3vw,38px); font-weight:300; font-style:italic; color:var(--cream); line-height:1.5; margin-top:32px; }

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════ */
.contact-page { padding:140px 60px 100px; max-width:1200px; margin:0 auto; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:60px; }
.contact-info h3 { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:300; color:var(--white); margin-bottom:20px; }
.contact-info p { font-size:14px; line-height:2; color:var(--muted); margin-bottom:36px; }
.contact-detail { display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border2); }
.contact-detail-icon { color:var(--gold); font-size:18px; margin-top:2px; flex-shrink:0; }
.contact-detail-info label { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px; }
.contact-detail-info a, .contact-detail-info span { font-size:14px; color:var(--cream); transition:color 0.3s; }
.contact-detail-info a:hover { color:var(--gold); }
.contact-socials { margin-top:36px; }
.contact-socials h4 { font-family:'Cinzel',serif; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.social-links { display:flex; gap:12px; flex-wrap:wrap; }
.social-link { padding:10px 18px; border:1px solid var(--border); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); transition:all 0.3s; }
.social-link:hover { border-color:var(--gold); color:var(--gold); }
.contact-wa-btn { display:flex; align-items:center; gap:12px; padding:16px 28px; background:#25D366; color:var(--black); font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; margin-top:28px; transition:background 0.3s; width:fit-content; }
.contact-wa-btn:hover { background:#1da851; }

/* ══════════════════════════════════════════════════════════
   CHECKOUT PAGE
   ══════════════════════════════════════════════════════════ */
.checkout-page { padding:140px 60px 100px; max-width:1100px; margin:0 auto; }
.checkout-grid { display:grid; grid-template-columns:1fr 380px; gap:48px; margin-top:48px; }
.checkout-form { }
.form-section { margin-bottom:36px; }
.form-section-title { font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:13px 16px; background:var(--card); border:1px solid var(--border2);
  color:var(--cream); font-size:13px; transition:border-color 0.3s; outline:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); }
.form-group select option { background:var(--dark); }
.form-group textarea { resize:vertical; min-height:80px; }
.payment-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.payment-option { padding:14px 16px; border:1px solid var(--border2); cursor:none; transition:all 0.3s; display:flex; align-items:center; gap:10px; }
.payment-option:hover, .payment-option.selected { border-color:var(--gold); background:rgba(201,168,76,0.06); }
.payment-option input[type="radio"] { accent-color:var(--gold); cursor:none; }
.payment-option-label { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--cream); }
.checkout-summary { background:var(--dark); border:1px solid var(--border); padding:28px; height:fit-content; position:sticky; top:110px; }
.summary-title { font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.summary-item { display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--border2); }
.summary-item-name { font-size:13px; color:var(--cream); }
.summary-item-price { font-family:'Cormorant Garamond',serif; font-size:16px; color:var(--gold); }
.summary-total { display:flex; justify-content:space-between; align-items:baseline; padding:16px 0 0; }
.summary-total-label { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.summary-total-amount { font-family:'Cormorant Garamond',serif; font-size:28px; color:var(--gold); }
.checkout-submit { width:100%; padding:17px; background:var(--gold); color:var(--black); font-family:'Cinzel',serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; border:none; cursor:none; margin-top:20px; transition:background 0.3s; }
.checkout-submit:hover { background:var(--gold2); }

/* ══════════════════════════════════════════════════════════
   CONFIRMATION PAGE
   ══════════════════════════════════════════════════════════ */
.confirmation-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:120px 40px; }
.confirmation-box { max-width:600px; text-align:center; }
.confirmation-icon { width:80px; height:80px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 32px; font-size:32px; color:var(--gold); }
.confirmation-title { font-family:'Cormorant Garamond',serif; font-size:52px; font-weight:300; color:var(--white); margin-bottom:16px; }
.confirmation-sub { font-size:14px; color:var(--muted); line-height:1.9; margin-bottom:36px; }
.confirmation-order { background:var(--dark); border:1px solid var(--border); padding:28px; margin-bottom:32px; text-align:left; }
.conf-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border2); font-size:13px; }
.conf-row:last-child { border:none; }
.conf-label { color:var(--muted); }
.conf-value { color:var(--cream); font-family:'Cormorant Garamond',serif; font-size:15px; }

/* ══════════════════════════════════════════════════════════
   QUIZ PAGE
   ══════════════════════════════════════════════════════════ */
.quiz-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:120px 40px; }
.quiz-container { max-width:600px; width:100%; }
.quiz-progress { height:2px; background:var(--border); margin-bottom:48px; border-radius:1px; }
.quiz-progress-bar { height:100%; background:var(--gold); border-radius:1px; transition:width 0.4s; }
.quiz-question { font-family:'Cormorant Garamond',serif; font-size:38px; font-weight:300; color:var(--white); margin-bottom:36px; line-height:1.2; }
.quiz-options { display:flex; flex-direction:column; gap:10px; }
.quiz-option { padding:16px 22px; border:1px solid var(--border); background:transparent; color:var(--cream); font-family:'Jost',sans-serif; font-size:13px; letter-spacing:0.5px; cursor:none; text-align:left; transition:all 0.3s; }
.quiz-option:hover { border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,0.05); }
.quiz-result { text-align:center; }
.quiz-result-label { font-size:9px; letter-spacing:5px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.quiz-result-name { font-family:'Cormorant Garamond',serif; font-size:72px; font-weight:300; color:var(--white); line-height:1; margin-bottom:12px; }
.quiz-result-tag { font-size:14px; font-style:italic; color:var(--muted); margin-bottom:10px; line-height:1.7; }
.quiz-result-price { font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--gold); margin-bottom:32px; }

/* ══════════════════════════════════════════════════════════
   POLICY PAGES
   ══════════════════════════════════════════════════════════ */
.policy-page { padding:140px 60px 100px; max-width:900px; margin:0 auto; }
.policy-page h2 { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:300; color:var(--white); margin:36px 0 14px; }
.policy-page h3 { font-family:'Cinzel',serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin:24px 0 10px; }
.policy-page p, .policy-page li { font-size:14px; line-height:1.9; color:rgba(245,237,214,0.65); margin-bottom:12px; }
.policy-page ul { padding-left:20px; }
.policy-page li { list-style:disc; color:rgba(245,237,214,0.65); }
.policy-page a { color:var(--gold); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .container, .brand-intro, .collection-section, .shop-grid-section, .about-hero, .mvp-section, .story-section, .positioning-section, .checkout-page, .policy-page, .contact-page { padding-left:32px; padding-right:32px; }
  .navbar, .navbar.scrolled { padding-left:32px; padding-right:32px; }
  .footer-grid, .footer-bottom { padding-left:32px; padding-right:32px; }
  .prod-grid { grid-template-columns:repeat(3,1fr); }
  .checkout-grid { grid-template-columns:1fr; }
  .checkout-summary { position:static; }
  .mvp-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .container, .brand-intro, .collection-section, .shop-grid-section, .about-hero, .mvp-section, .story-section, .positioning-section, .policy-page, .contact-page, .checkout-page { padding-left:20px; padding-right:20px; }
  .navbar, .navbar.scrolled { padding:16px 20px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-wa { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; padding:0 20px 40px; }
  .footer-bottom { flex-direction:column; gap:16px; text-align:center; padding:20px; }
  .hero { padding-top:100px; }
  .hero-content { padding:0 20px; }
  .hero-title { font-size:52px; }
  .brand-intro { grid-template-columns:1fr; padding:80px 20px; gap:40px; }
  .featured { grid-template-columns:1fr; height:auto; }
  .feat-img { height:90vw; }
  .feat-content { padding:36px 20px; }
  .feat-name { font-size:52px; }
  .prod-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .prod-img { height:200px; }
  .prod-info { padding:16px; }
  .prod-name { font-size:18px; line-height:1.2; }
  .prod-tag { font-size:10px; margin-bottom:12px; line-height:1.5; }
  .prod-price { font-size:16px; }
  .prod-foot { flex-direction:column; gap:10px; align-items:flex-start; }
  .atc-btn { font-size:9px; padding:8px 12px; letter-spacing:1px; width:100%; text-align:center; }
  .prod-cat { font-size:8px; margin-bottom:4px; }
  .mk-card { grid-column:span 2; }
  .mk-inner { grid-template-columns:1fr; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .quiz-steps { gap:20px; }
  .lifestyle-content { padding:0 20px; }
  .product-hero { grid-template-columns:1fr; padding-top:80px; }
  .product-gallery-main { min-height:420px; height:100vw; object-fit:contain; object-position:center center; }
  .product-info { padding:36px 20px; }
  .notes-pyramid { grid-template-columns:1fr; }
  .story-section { grid-template-columns:1fr; padding:80px 20px; gap:40px; }
  .contact-grid { grid-template-columns:1fr; }
  .mvp-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .payment-options { grid-template-columns:1fr; }
  .cart-drawer { width:100%; }
}

@media (max-width:400px) {
  .prod-grid { grid-template-columns:1fr; }
  .prod-img { height:260px; }
  .mk-card { grid-column:span 1; }
}