/* ═══════════════════════════════════════════════════════════
   ELYSÉ HAFEZ — LUXURY STYLESHEET v6
   Enhanced: grain, magnetic buttons, parallax, transitions,
   horizontal scroll story, animated features, WA float,
   size guide modal, exit-intent popup, count-up stats
═══════════════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:       #2e1f1a;
  --off-black:   #4a342a;
  --white:       #faf8f5;
  --cream:       #f2ede5;
  --rose:        #c8a39a;
  --rose-light:  #e8d5d0;
  --rose-dark:   #9e6e67;
  --gold:        #b8935a;
  --gold-light:  #d4b483;
  --muted:       #7a7268;
  --border:      rgba(184,147,90,0.25);
  --font-display:'Cormorant Garamond', serif;
  --font-sans:   'Tenor Sans', serif;
  --font-body:   'Jost', sans-serif;
  --nav-h:       80px;
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  overflow-x: hidden;
  cursor: none;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #1a0e0b; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* ── FILM GRAIN ── */
#grain {
  position: fixed;
  inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9990;
  opacity: 0.028;
  animation: grainShift 0.5s steps(1) infinite;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}
@keyframes grainShift {
  0%  { transform: translate(0,0); }
  20% { transform: translate(-3%,-2%); }
  40% { transform: translate(2%,3%); }
  60% { transform: translate(-1%,2%); }
  80% { transform: translate(3%,-1%); }
}

/* ── CURSOR ── */
.cursor-dot, .cursor-ring {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
}
.cursor-dot { width:5px; height:5px; background:var(--gold); transition: width .2s, height .2s, opacity .2s; }
.cursor-ring {
  width:34px; height:34px;
  border:1px solid rgba(184,147,90,.55); opacity:.6;
  transition: width .45s var(--ease), height .45s var(--ease), border-color .3s, background .3s, opacity .3s;
}
.cursor-ring.expand { width:60px; height:60px; background:rgba(184,147,90,.06); border-color:rgba(184,147,90,.9); opacity:1; }
.cursor-ring.expand ~ .cursor-dot, body.cursor-expand .cursor-dot { opacity:0; }

/* ── CURTAIN TRANSITION ── */
#page-curtain {
  position: fixed; inset: 0; z-index: 9500;
  pointer-events: none;
  display: grid; grid-template-columns: repeat(5,1fr);
  visibility: hidden;
}
#page-curtain.closing { visibility: visible; }
.curtain-strip {
  height: 100vh; background: #1e110d;
  transform: scaleY(0); transform-origin: top;
  will-change: transform;
}
#page-curtain.closing .curtain-strip { animation: curtainClose .65s var(--ease) forwards; }
@keyframes curtainClose { from { transform:scaleY(0); transform-origin:top; } to { transform:scaleY(1); transform-origin:top; } }
.curtain-strip:nth-child(1){ animation-delay:0s; }
.curtain-strip:nth-child(2){ animation-delay:.05s; }
.curtain-strip:nth-child(3){ animation-delay:.1s; }
.curtain-strip:nth-child(4){ animation-delay:.15s; }
.curtain-strip:nth-child(5){ animation-delay:.2s; }

/* ── LOADER ── */
#loader {
  position:fixed; inset:0; background:#2e1f1a; z-index:9000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  transition: opacity .9s ease, visibility .9s ease;
}
#loader.gone { opacity:0; visibility:hidden; pointer-events:none; }
.loader-rings { position:relative; width:80px; height:80px; margin-bottom:20px; }
.loader-ring-el {
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(184,147,90,.15);
  animation:ringPulse 2.2s ease-in-out infinite;
}
.loader-ring-el:nth-child(2){ inset:12px; border-color:rgba(184,147,90,.25); animation-delay:.25s; }
.loader-ring-el:nth-child(3){ inset:24px; border-color:rgba(184,147,90,.55); animation-delay:.5s; }
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.04);opacity:.55} }
.loader-logo {
  font-family:var(--font-display); font-size:clamp(2rem,6vw,4rem);
  font-weight:300; color:var(--white); letter-spacing:.45em; text-transform:uppercase;
}
.loader-logo .c { display:inline-block; opacity:0; transform:translateY(100%); animation:charUp .7s var(--ease) forwards; }
.loader-sub { font-family:var(--font-sans); font-size:.58rem; letter-spacing:.38em; color:var(--gold); text-transform:uppercase; opacity:0; animation:fadeIn .8s 1.3s ease forwards; }
.loader-bar-wrap { width:140px; height:1px; background:rgba(255,255,255,.08); overflow:hidden; opacity:0; animation:fadeIn .4s .8s ease forwards; }
.loader-bar { height:100%; width:0; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:loaderBarAnim 1.5s .9s ease forwards; }
@keyframes charUp { to { opacity:1; transform:none; } }
@keyframes fadeIn { to { opacity:1; } }
@keyframes loaderBarAnim { to { width:100%; } }

/* ── NAV ── */
#navbar {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  z-index:800; display:flex; align-items:center; justify-content:space-between;
  padding:0 56px; transition:background .4s, box-shadow .4s;
}
#navbar.scrolled {
  background:rgba(250,248,245,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--border);
}
#navbar.light { background:var(--white); box-shadow:0 1px 0 var(--border); }
.nav-logo {
  font-family:var(--font-display); font-size:1.45rem; font-weight:400;
  letter-spacing:.22em; text-decoration:none; color:var(--white);
  text-transform:uppercase; transition:color .3s; flex-shrink:0;
}
nav.scrolled .nav-logo, nav.light .nav-logo { color:#4a342a; }
.nav-right { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.nav-links { display:flex; gap:40px; list-style:none; }
.nav-links a {
  font-family:var(--font-sans); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; text-decoration:none;
  color:rgba(250,248,245,.8); position:relative; transition:color .3s;
}
nav.scrolled .nav-links a, nav.light .nav-links a { color:var(--muted); }
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--gold); transition:width .45s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a:hover, .nav-links a.active { color:var(--gold)!important; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:none; background:none; border:none; padding:4px; }
.nav-hamburger span { display:block; width:26px; height:1px; background:var(--white); transition:background .3s,transform .3s,opacity .3s; }
nav.scrolled .nav-hamburger span, nav.light .nav-hamburger span { background:var(--black); }
.nav-hamburger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2){ opacity:0; }
.nav-hamburger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.mobile-menu {
  position:fixed; inset:0; background:var(--black); z-index:700;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:44px;
  opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s;
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu a {
  font-family:var(--font-display); font-size:clamp(2rem,9vw,3.5rem);
  color:var(--white); text-decoration:none; letter-spacing:.1em;
  font-style:italic; transition:color .3s;
}
.mobile-menu a:hover { color:var(--gold); }

/* ── CART BADGE ── */
.cart-btn { position:relative; background:none; border:none; cursor:none; color:rgba(250,248,245,.85); transition:color .3s; display:flex; align-items:center; justify-content:center; padding:4px; }
nav.scrolled .cart-btn, nav.light .cart-btn { color:var(--black); }
.cart-btn:hover { color:var(--gold)!important; }
.cart-badge { position:absolute; top:-4px; right:-6px; background:var(--gold); color:var(--black); font-size:.48rem; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:700; padding:0 3px; }

/* ── MAGNETIC BUTTON SYSTEM ── */
.mag-wrap { position:relative; display:inline-block; }
.btn-primary, .btn-ghost, .btn-dark, .btn-outline {
  font-family:var(--font-sans); font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; text-decoration:none;
  padding:17px 44px; cursor:none; display:inline-flex; align-items:center; gap:10px;
  border:1px solid transparent; position:relative; overflow:hidden;
  transition:color .45s;
}
.btn-primary { background:var(--gold); color:var(--black); border-color:var(--gold); }
.btn-ghost   { background:transparent; color:var(--white); border-color:rgba(250,248,245,.28); }
.btn-dark    { background:var(--black); color:var(--white); border-color:var(--black); }
.btn-outline { background:transparent; color:var(--black); border-color:var(--border); }

.btn-primary::before, .btn-ghost::before, .btn-dark::before, .btn-outline::before {
  content:''; position:absolute; inset:0;
  transform:translateY(101%); transition:transform .48s var(--ease);
}
.btn-primary::before { background:var(--off-black); }
.btn-ghost::before   { background:rgba(250,248,245,.1); }
.btn-dark::before    { background:var(--gold); }
.btn-outline::before { background:var(--gold); }

.btn-primary:hover { color:var(--white); }
.btn-ghost:hover   { color:var(--white); }
.btn-dark:hover    { color:var(--black); }
.btn-outline:hover { color:var(--black); border-color:var(--gold); }

.btn-primary:hover::before, .btn-ghost:hover::before,
.btn-dark:hover::before, .btn-outline:hover::before { transform:translateY(0); }

.btn-arrow { transition:transform .4s var(--ease); }
.btn-primary:hover .btn-arrow, .btn-dark:hover .btn-arrow,
.btn-ghost:hover .btn-arrow, .btn-outline:hover .btn-arrow { transform:translateX(5px); }

/* ── HERO ── */
#home { height:100vh; min-height:560px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#1e110d; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(ellipse 65% 55% at 62% 38%,#5c3228 0%,#1e110d 65%); transition:background .5s; }
.hero-orb {
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.12;
  animation:orbFloat 20s ease-in-out infinite;
}
.hero-orb-1 { width:550px; height:550px; background:radial-gradient(circle,#c8a39a,transparent 70%); top:-10%; right:-5%; }
.hero-orb-2 { width:380px; height:380px; background:radial-gradient(circle,#b8935a,transparent 70%); bottom:-5%; left:5%; opacity:.08; animation-delay:-8s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-18px,26px)} 66%{transform:translate(18px,-18px)} }
#heroVideo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; z-index:0; }
.hero-lines { position:absolute; inset:0; background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0,rgba(255,255,255,.014) 1px,transparent 1px,transparent 80px); }
.hero-circle { position:absolute; width:clamp(260px,38vw,560px); height:clamp(260px,38vw,560px); border-radius:50%; border:1px solid rgba(200,163,154,.12); top:50%; left:50%; transform:translate(-50%,-50%); animation:rotateSlow 35s linear infinite; }
.hero-circle::before { content:''; position:absolute; inset:22px; border-radius:50%; border:1px solid rgba(184,147,90,.08); }
.hero-circle::after { content:''; position:absolute; top:-4px; left:50%; width:8px; height:8px; background:var(--gold); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 14px var(--gold); }
.hero-content { position:relative; z-index:2; text-align:center; padding:0 24px; max-width:100%; width:100%; display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow { font-family:var(--font-sans); font-size:.62rem; letter-spacing:.32em; color:var(--gold); text-transform:uppercase; margin-bottom:30px; opacity:0; animation:fadeUp .9s 1.8s ease forwards; white-space:nowrap; }
.hero-title { font-family:var(--font-display); font-size:clamp(3rem,10vw,9rem); font-weight:300; color:var(--white); line-height:.9; letter-spacing:.07em; text-transform:uppercase; opacity:0; animation:fadeUp 1s 2s ease forwards; }
.hero-title em { display:block; font-style:italic; color:var(--rose-light); font-weight:300; font-size:.75em; letter-spacing:.18em; margin-top:8px; }
.hero-divider { width:1px; height:48px; background:linear-gradient(to bottom,transparent,var(--gold),transparent); margin:28px auto; opacity:0; animation:fadeIn 1s 2.2s ease forwards; }
.hero-subtitle { font-family:var(--font-display); font-size:clamp(.95rem,2.2vw,1.4rem); font-style:italic; color:rgba(250,248,245,.45); font-weight:300; letter-spacing:.06em; opacity:0; animation:fadeUp .9s 2.3s ease forwards; }
.hero-cta { display:inline-flex; gap:16px; margin-top:52px; opacity:0; animation:fadeUp .9s 2.6s ease forwards; flex-wrap:wrap; justify-content:center; }
.hero-scroll { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; animation:fadeIn 1s 3.2s ease forwards; }
.hero-scroll span { font-family:var(--font-sans); font-size:.56rem; letter-spacing:.36em; color:rgba(250,248,245,.35); text-transform:uppercase; }
.scroll-line { width:1px; height:44px; background:linear-gradient(to bottom,rgba(184,147,90,.6),transparent); animation:scrollPulse 2s ease-in-out infinite; }

/* ── MARQUEE ── */
.marquee-wrap { background:var(--off-black); border-top:1px solid rgba(184,147,90,.14); border-bottom:1px solid rgba(184,147,90,.14); padding:14px 0; overflow:hidden; position:relative; }
.marquee-wrap::before, .marquee-wrap::after { content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none; }
.marquee-wrap::before { left:0; background:linear-gradient(90deg,var(--off-black),transparent); }
.marquee-wrap::after  { right:0; background:linear-gradient(-90deg,var(--off-black),transparent); }
.marquee-track { display:flex; animation:marquee 30s linear infinite; white-space:nowrap; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-item { font-family:var(--font-display); font-size:.95rem; font-style:italic; color:var(--rose-light); letter-spacing:.1em; padding:0 48px; }
.marquee-sep { color:var(--gold); font-style:normal; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ── STORY ── */
#story { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:120px 80px; background:var(--cream); }
.story-img-frame { width:100%; aspect-ratio:3/4; background:linear-gradient(150deg,var(--rose-light) 0%,var(--rose) 55%,var(--rose-dark) 100%); position:relative; overflow:hidden; }
.story-img-frame::after { content:'\00C9'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:11rem; font-style:italic; color:rgba(255,255,255,.13); pointer-events:none; }
.story-img-label { position:absolute; bottom:-14px; right:-14px; background:#4a342a; color:var(--white); font-family:var(--font-display); font-size:.85rem; font-style:italic; letter-spacing:.1em; padding:14px 22px; }
.story-visual { position:relative; }
.story-text { display:flex; flex-direction:column; gap:24px; }
.story-body { font-family:var(--font-body); font-size:.95rem; font-weight:300; line-height:1.9; color:var(--muted); }
.story-quote { border-left:2px solid var(--gold); padding-left:24px; font-family:var(--font-display); font-size:1.3rem; font-style:italic; color:var(--black); line-height:1.5; }
.story-link { font-family:var(--font-sans); font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--black); text-decoration:none; display:inline-flex; align-items:center; gap:12px; transition:gap .3s,color .3s; }
.story-link:hover { color:var(--gold); gap:22px; }
.story-link::after { content:'\2192'; }

/* ── COLLECTIONS PREVIEW ── */
#collections-preview { padding:120px 48px; background:var(--white); }
.collections-preview-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:64px; flex-wrap:wrap; gap:24px; }
.collections-cards { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-bottom:80px; }
.collection-card { position:relative; overflow:hidden; cursor:none; aspect-ratio:4/5; width:100%; display:flex; align-items:flex-end; }
.collection-card-bg { position:absolute; inset:0; transition:transform .7s ease; background-size:cover; background-position:center; }
.collection-card:hover .collection-card-bg { transform:scale(1.05); }
.collection-card::before { content:''; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.2); z-index:3; opacity:0; transform:scale(.95); transition:opacity .5s,transform .5s var(--ease); }
.collection-card:hover::before { opacity:1; transform:scale(1); }
.collection-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(12,11,9,.78) 0%,transparent 55%); }
.collection-card-body { position:relative; z-index:2; padding:40px 36px; width:100%; transform:translateY(6px); transition:transform .5s var(--ease); }
.collection-card:hover .collection-card-body { transform:translateY(0); }
.collection-card-year { font-family:var(--font-sans); font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.collection-card-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:300; font-style:italic; color:var(--white); line-height:1; margin-bottom:12px; }
.collection-card-subtitle { font-family:var(--font-body); font-size:.8rem; font-weight:300; color:rgba(250,248,245,.55); margin-bottom:24px; letter-spacing:.06em; }
.collection-card-link { font-family:var(--font-sans); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--white); text-decoration:none; display:inline-flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:4px; opacity:0; transform:translateY(8px); transition:opacity .4s .1s,transform .4s .1s var(--ease),color .3s,border-color .3s,gap .3s; }
.collection-card:hover .collection-card-link { opacity:1; transform:translateY(0); }
.collection-card-link:hover { color:var(--gold); border-color:var(--gold); gap:18px; }
.featured-label { font-family:var(--font-sans); font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.featured-title { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,3rem); font-weight:300; color:var(--black); margin-bottom:48px; }
.featured-title em { font-style:italic; color:var(--rose-dark); }
.view-all-wrap { text-align:center; margin-top:56px; }

/* ── FEATURES ── */
#features { background:#1a0e0b; padding:120px 80px; }
.features-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.features-right-visual { aspect-ratio:3/4; background:linear-gradient(155deg,#c8a39a 0%,#9e6e67 50%,#2e1f1a 100%); position:relative; overflow:hidden; }
.features-right-visual::before { content:'\00C9'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:12rem; font-style:italic; color:rgba(255,255,255,.08); }
.features-right-tag { position:absolute; bottom:0; right:0; background:var(--gold); color:var(--black); font-family:var(--font-sans); font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; padding:12px 18px; }
.feature-row { display:flex; align-items:flex-start; gap:24px; padding:28px 0; border-bottom:1px solid rgba(184,147,90,.1); position:relative; overflow:hidden; }
.feature-row::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.feature-row:hover::after { transform:scaleX(1); }
.feature-num { font-family:var(--font-display); font-size:.78rem; color:var(--gold); opacity:.45; flex-shrink:0; padding-top:4px; letter-spacing:.08em; }
.feature-content { flex:1; }
.feature-name { font-family:var(--font-display); font-size:1.25rem; font-style:italic; color:var(--white); margin-bottom:8px; transition:color .3s; }
.feature-row:hover .feature-name { color:var(--gold); }
.feature-desc { font-family:var(--font-body); font-size:.82rem; font-weight:300; color:rgba(250,248,245,.35); line-height:1.78; }
.feature-glyph { font-size:1.4rem; opacity:.45; flex-shrink:0; padding-top:2px; transition:opacity .3s,transform .4s var(--ease); }
.feature-row:hover .feature-glyph { opacity:1; transform:rotate(10deg) scale(1.12); }

/* ── ABOUT ── */
#about { display:grid; grid-template-columns:1fr 1fr; min-height:600px; }
.about-visual { background:linear-gradient(155deg,#c8a39a 0%,#9e6e67 100%); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.about-visual::before { content:'ELYS\00C9'; font-family:var(--font-display); font-size:clamp(5rem,12vw,10rem); font-style:italic; color:rgba(255,255,255,.07); letter-spacing:.1em; user-select:none; }
.about-visual-tag { position:absolute; bottom:36px; left:36px; font-family:var(--font-sans); font-size:.58rem; letter-spacing:.38em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.about-text { padding:100px 80px; display:flex; flex-direction:column; justify-content:center; gap:28px; background:var(--cream); }
.about-body { font-family:var(--font-body); font-size:.94rem; font-weight:300; line-height:1.9; color:var(--muted); }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:12px; }
.stat-item { border-top:1px solid var(--border); padding-top:18px; }
.stat-num { font-family:var(--font-display); font-size:2.6rem; font-weight:300; color:var(--black); }
.stat-label { font-family:var(--font-sans); font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

/* ── HOW TO ORDER ── */
#how-to-order { background:#3d2820; padding:120px 80px; }
.steps-wrap { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:48px; margin-top:72px; }
.step-item { display:flex; flex-direction:column; gap:18px; }
.step-num { width:56px; height:56px; border:1px solid rgba(184,147,90,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.2rem; color:var(--gold); transition:background .3s,border-color .3s; }
.step-item:hover .step-num { background:rgba(184,147,90,.1); border-color:var(--gold); }
.step-title { font-family:var(--font-display); font-size:1.1rem; font-style:italic; color:var(--white); }
.step-desc { font-family:var(--font-body); font-size:.82rem; font-weight:300; line-height:1.78; color:rgba(250,248,245,.4); }

/* ── TESTIMONIALS ── */
#testimonials { background:var(--white); padding:120px 0; overflow:hidden; }
.testimonials-header { text-align:center; padding:0 48px; margin-bottom:72px; }
.testi-track { display:flex; gap:24px; animation:testiScroll 32s linear infinite; }
.testi-track:hover { animation-play-state:paused; }
@keyframes testiScroll { from{transform:translateX(0)} to{transform:translateX(calc(-50% - 12px))} }
.testimonial-card { flex-shrink:0; width:360px; border:1px solid var(--border); padding:36px 32px; border-left:2px solid var(--gold); transition:box-shadow .3s; background:var(--cream); }
.testimonial-card:hover { box-shadow:0 12px 40px rgba(12,11,9,.07); }
.testimonial-stars { color:var(--gold); font-size:.78rem; letter-spacing:2px; margin-bottom:14px; }
.testimonial-text { font-family:var(--font-display); font-size:1.05rem; font-style:italic; font-weight:300; line-height:1.72; color:var(--black); margin-bottom:24px; }
.testimonial-text::before { content:'\201C'; color:var(--rose); font-size:1.4em; }
.testimonial-text::after  { content:'\201D'; color:var(--rose); font-size:1.4em; }
.testimonial-author { font-family:var(--font-sans); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }

/* ── CONTACT ── */
#contact { background:var(--cream); padding:120px 80px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:36px; }
.contact-detail { display:flex; flex-direction:column; gap:6px; }
.contact-detail-label { font-family:var(--font-sans); font-size:.58rem; letter-spacing:.38em; text-transform:uppercase; color:var(--gold); }
.contact-detail-value { font-family:var(--font-display); font-size:1.1rem; color:var(--black); }
.contact-detail-value a { color:inherit; text-decoration:none; transition:color .3s; }
.contact-detail-value a:hover { color:var(--rose-dark); }
.social-links { display:flex; gap:20px; flex-wrap:wrap; }
.social-link { font-family:var(--font-sans); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--black); text-decoration:none; transition:color .3s; }
.social-link:hover { color:var(--gold); }
.contact-form-wrap { display:flex; flex-direction:column; gap:18px; }
.contact-submit { padding:16px 40px; background:#4a342a; color:var(--white); border:none; cursor:none; font-family:var(--font-sans); font-size:.63rem; letter-spacing:.28em; text-transform:uppercase; transition:background .3s; align-self:flex-start; overflow:hidden; position:relative; }
.contact-submit::before { content:''; position:absolute; inset:0; background:var(--gold); transform:translateY(101%); transition:transform .45s var(--ease); }
.contact-submit:hover { color:var(--black); }
.contact-submit:hover::before { transform:translateY(0); }
.contact-submit span { position:relative; z-index:1; }

/* ── FOOTER ── */
footer { background:var(--black); padding:72px 80px 40px; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-brand-name { font-family:var(--font-display); font-size:1.6rem; font-weight:300; color:var(--white); letter-spacing:.2em; text-transform:uppercase; margin-bottom:6px; }
.footer-tagline { font-family:var(--font-display); font-style:italic; font-size:.95rem; color:var(--muted); margin-bottom:18px; }
.footer-desc { font-family:var(--font-body); font-size:.8rem; font-weight:300; color:rgba(250,248,245,.3); line-height:1.8; }
.footer-col-title { font-family:var(--font-sans); font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-links a { font-family:var(--font-body); font-size:.82rem; font-weight:300; color:rgba(250,248,245,.38); text-decoration:none; transition:color .3s; }
.footer-links a:hover { color:var(--white); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:32px; flex-wrap:wrap; gap:16px; }
.footer-copy { font-family:var(--font-body); font-size:.73rem; font-weight:300; color:rgba(250,248,245,.2); }
.footer-bottom-links { display:flex; gap:24px; }
.footer-bottom-links a { font-family:var(--font-sans); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(250,248,245,.2); text-decoration:none; transition:color .3s; }
.footer-bottom-links a:hover { color:var(--gold); }

/* ── FLOATING WHATSAPP ── */
#wa-float { position:fixed; bottom:32px; right:32px; z-index:900; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.wa-bubble { background:var(--white); color:var(--black); font-family:var(--font-body); font-size:.78rem; padding:10px 16px; box-shadow:0 6px 32px rgba(0,0,0,.14); opacity:0; transform:translateX(8px); transition:opacity .4s,transform .4s var(--ease); pointer-events:none; max-width:180px; text-align:right; line-height:1.5; border-left:2px solid #25D366; }
.wa-bubble.visible { opacity:1; transform:translateX(0); pointer-events:auto; }
.wa-btn-float { width:54px; height:54px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:none; text-decoration:none; box-shadow:0 4px 20px rgba(37,211,102,.4); transition:transform .3s var(--ease),box-shadow .3s; position:relative; }
.wa-btn-float:hover { transform:scale(1.1); box-shadow:0 8px 32px rgba(37,211,102,.5); }
.wa-btn-float svg { width:28px; height:28px; fill:white; }
.wa-pulse { position:absolute; inset:-4px; border-radius:50%; border:2px solid #25D366; opacity:0; animation:waPulse 2.8s ease-in-out infinite; }
@keyframes waPulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.55);opacity:0} }

/* ── EXIT INTENT POPUP ── */
#exit-popup { position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s; padding:24px; }
#exit-popup.open { opacity:1; visibility:visible; }
.exit-popup-box { background:var(--white); max-width:460px; width:100%; padding:56px 48px; text-align:center; position:relative; }
.exit-popup-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:1.1rem; cursor:none; color:var(--muted); transition:color .3s; }
.exit-popup-close:hover { color:var(--black); }
.exit-popup-icon { font-size:2.2rem; margin-bottom:16px; opacity:.6; }
.exit-popup-title { font-family:var(--font-display); font-size:2rem; font-weight:300; margin-bottom:10px; color:var(--black); }
.exit-popup-title em { font-style:italic; color:var(--rose-dark); }
.exit-popup-sub { font-family:var(--font-body); font-size:.86rem; color:var(--muted); font-weight:300; line-height:1.7; margin-bottom:28px; }
.exit-popup-form { display:flex; gap:10px; }
.exit-popup-form input { flex:1; border:none; border-bottom:1px solid var(--border); padding:12px 0; font-family:var(--font-body); font-size:.9rem; background:none; outline:none; transition:border-color .3s; }
.exit-popup-form input:focus { border-color:var(--gold); }
.exit-popup-dismiss { margin-top:20px; font-family:var(--font-sans); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(122,114,104,.5); cursor:none; background:none; border:none; text-decoration:underline; }

/* ── SIZE GUIDE MODAL ── */
#size-guide-modal { position:fixed; inset:0; z-index:3500; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s; padding:24px; }
#size-guide-modal.open { opacity:1; visibility:visible; }
.size-guide-box { background:var(--white); max-width:560px; width:100%; padding:48px 44px; position:relative; max-height:90vh; overflow-y:auto; }
.size-guide-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:1.1rem; cursor:none; color:var(--muted); transition:color .3s; }
.size-guide-close:hover { color:var(--black); }
.size-guide-title { font-family:var(--font-display); font-size:1.8rem; font-weight:300; margin-bottom:6px; }
.size-guide-sub { font-family:var(--font-body); font-size:.82rem; color:var(--muted); font-weight:300; margin-bottom:28px; }
.size-guide-table { width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:.82rem; }
.size-guide-table th { font-family:var(--font-sans); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; }
.size-guide-table td { padding:10px 12px; border-bottom:1px solid rgba(184,147,90,.1); color:var(--muted); font-weight:300; }
.size-guide-table tr:last-child td { border-bottom:none; }
.size-guide-table tr:hover td { background:rgba(184,147,90,.04); }
.size-guide-note { font-family:var(--font-body); font-size:.78rem; color:var(--muted); font-weight:300; margin-top:20px; line-height:1.7; padding-top:16px; border-top:1px solid var(--border); }

/* ── SECTION COMMONS ── */
.section-eyebrow { font-family:var(--font-sans); font-size:.6rem; letter-spacing:.44em; color:var(--gold); text-transform:uppercase; margin-bottom:14px; }
.section-title { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.8rem); font-weight:300; line-height:1.1; color:var(--black); }
.section-title em { font-style:italic; color:var(--rose-dark); }

/* ── REVEAL ANIMATION ── */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .85s ease,transform .85s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-left { opacity:0; transform:translateX(-36px); transition:opacity .85s ease,transform .85s ease; }
.reveal-left.visible { opacity:1; transform:none; }

/* ── PRODUCTS GRID ── */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2px; }
.product-card { position:relative; background:var(--cream); overflow:hidden; cursor:none; }
.product-img { aspect-ratio:3/4; position:relative; overflow:hidden; display:block; width:100%; isolation:isolate; }
.product-img-bg { position:absolute; inset:0; width:100%; height:100%; transition:transform .7s ease; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:5rem; font-style:italic; }
.product-card:hover .product-img-bg { transform:scale(1.06); }
.pcard-track { display:flex; width:100%; height:100%; transition:transform .38s cubic-bezier(.25,.46,.45,.94); will-change:transform; }
.pcard-slide { flex:0 0 100%; min-width:0; width:100%; height:100%; overflow:hidden; }
.pcard-slide img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.product-badge { position:absolute; top:16px; left:16px; font-family:var(--font-sans); font-size:.52rem; letter-spacing:.25em; text-transform:uppercase; padding:5px 12px; z-index:1; }
.badge-new { background:var(--gold); color:var(--black); }
.badge-out { background:var(--black); color:var(--white); }
.product-overlay { position:absolute; inset:0; background:rgba(12,11,9,.6); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .4s; }
.product-card:hover .product-overlay { opacity:1; }
.product-overlay-btn { font-family:var(--font-sans); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; padding:14px 32px; background:var(--white); color:var(--black); border:none; cursor:none; transition:background .3s,color .3s; }
.product-overlay-btn:hover { background:var(--gold); }
.product-info { padding:20px 20px 28px; }
.product-name { font-family:var(--font-display); font-size:1.15rem; font-weight:400; margin-bottom:4px; }
.product-sub { font-family:var(--font-sans); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.product-footer { display:flex; align-items:center; justify-content:space-between; }
.product-price { font-family:var(--font-display); font-size:1rem; color:var(--black); }
.product-price-out { text-decoration:line-through; color:var(--muted); font-size:.85rem; }
.out-of-stock-label { font-family:var(--font-sans); font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* ── PRODUCT MODAL ── */
.modal-overlay { position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s; padding:24px; }
.modal-overlay.open { opacity:1; visibility:visible; }
.modal-box { background:var(--white); width:100%; max-width:780px; max-height:92vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; position:relative; }
.modal-close { position:absolute; top:16px; right:20px; background:none; border:none; cursor:none; font-size:1.2rem; color:var(--muted); z-index:5; transition:color .3s; }
.modal-close:hover { color:var(--black); }
.modal-img { aspect-ratio:3/4; overflow:hidden; background:var(--cream); }
.modal-content { padding:40px 36px; display:flex; flex-direction:column; gap:18px; overflow-y:auto; }
.modal-tag { font-family:var(--font-sans); font-size:.56rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.modal-name { font-family:var(--font-display); font-size:1.9rem; font-weight:300; line-height:1.1; }
.modal-desc { font-family:var(--font-body); font-size:.86rem; font-weight:300; color:var(--muted); line-height:1.8; }
.modal-price { font-family:var(--font-display); font-size:1.4rem; color:var(--black); }
.modal-price-out { text-decoration:line-through; color:var(--muted); font-size:.9em; }
.modal-sizes { display:flex; gap:8px; flex-wrap:wrap; }
.size-btn { padding:8px 16px; border:1px solid var(--border); background:none; font-family:var(--font-sans); font-size:.62rem; letter-spacing:.18em; cursor:none; transition:all .3s; }
.size-btn:hover { border-color:var(--gold); }
.size-btn.selected { background:var(--black); color:var(--white); border-color:var(--black); }
.size-btn:disabled { opacity:.35; cursor:not-allowed; }
.modal-size-guide-link { font-family:var(--font-sans); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); background:none; border:none; cursor:none; text-decoration:underline; padding:0; }
.modal-action-wrap { display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.modal-buy-btn { padding:16px; background:var(--black); color:var(--white); border:none; font-family:var(--font-sans); font-size:.63rem; letter-spacing:.28em; text-transform:uppercase; cursor:none; transition:background .3s; position:relative; overflow:hidden; }
.modal-buy-btn::before { content:''; position:absolute; inset:0; background:var(--gold); transform:translateY(101%); transition:transform .45s var(--ease); }
.modal-buy-btn:hover { color:var(--black); }
.modal-buy-btn:hover::before { transform:translateY(0); }
.modal-buy-btn span { position:relative; z-index:1; }
.modal-out-notice { font-family:var(--font-body); font-size:.82rem; color:var(--muted); }

/* ── CART ── */
.cart-overlay { position:fixed; inset:0; z-index:3000; display:flex; align-items:stretch; justify-content:flex-end; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s; }
.cart-overlay.open { opacity:1; visibility:visible; }
.cart-drawer { width:min(480px,100vw); background:var(--white); display:flex; flex-direction:column; height:100%; transform:translateX(100%); transition:transform .45s cubic-bezier(.25,.46,.45,.94); }
.cart-overlay.open .cart-drawer { transform:none; }
.cart-header { padding:28px 32px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.cart-title { font-family:var(--font-display); font-size:1.8rem; font-weight:300; letter-spacing:.04em; }
.cart-close-btn { background:none; border:none; cursor:none; font-size:1.2rem; color:var(--muted); transition:color .3s; }
.cart-close-btn:hover { color:var(--black); }
.cart-body { flex:1; overflow-y:auto; padding:24px 32px; }
.cart-empty { text-align:center; padding:60px 0; color:var(--muted); }
.cart-empty-icon { font-size:3rem; margin-bottom:16px; opacity:.3; }
.cart-empty-text { font-family:var(--font-display); font-size:1.1rem; font-style:italic; }
.cart-item { display:grid; grid-template-columns:72px 1fr auto; gap:16px; padding:16px 0; border-bottom:1px solid var(--border); align-items:start; }
.cart-item-img { width:72px; height:88px; overflow:hidden; flex-shrink:0; }
.cart-item-name { font-family:var(--font-display); font-size:1rem; font-weight:400; margin-bottom:4px; }
.cart-item-meta { font-family:var(--font-sans); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.cart-item-price { font-family:var(--font-display); font-size:.9rem; color:var(--rose-dark); }
.cart-item-controls { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cart-qty-wrap { display:flex; align-items:center; gap:0; border:1px solid var(--border); }
.cart-qty-wrap button { background:none; border:none; cursor:none; width:28px; height:28px; font-size:.9rem; color:var(--black); transition:background .2s; }
.cart-qty-wrap button:hover { background:var(--cream); }
.cart-qty-wrap span { width:32px; text-align:center; font-family:var(--font-sans); font-size:.75rem; }
.cart-item-line-price { font-family:var(--font-display); font-size:.95rem; font-weight:500; }
.cart-remove { background:none; border:none; cursor:none; color:var(--muted); font-size:.75rem; transition:color .3s; }
.cart-remove:hover { color:var(--rose-dark); }
.cart-promo { padding:16px 0; border-bottom:1px solid var(--border); display:flex; gap:10px; }
.cart-promo input { flex:1; border:1px solid var(--border); padding:10px 14px; font-family:var(--font-sans); font-size:.75rem; letter-spacing:.1em; background:none; outline:none; }
.cart-promo-btn { padding:10px 18px; background:var(--black); color:var(--white); border:none; cursor:none; font-family:var(--font-sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; transition:background .3s; }
.cart-promo-btn:hover { background:var(--gold); color:var(--black); }
.promo-msg { font-size:.72rem; margin-top:6px; font-family:var(--font-sans); }
.cart-totals { padding:16px 0; }
.cart-total-row { display:flex; justify-content:space-between; padding:5px 0; font-family:var(--font-sans); font-size:.78rem; }
.cart-total-row.grand { border-top:1px solid var(--border); margin-top:8px; padding-top:12px; font-family:var(--font-display); font-size:1.2rem; font-weight:400; }
.cart-footer { padding:20px 32px 28px; border-top:1px solid var(--border); }
.cart-checkout-btn { width:100%; padding:16px; background:var(--black); color:var(--white); border:none; cursor:none; font-family:var(--font-sans); font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; transition:background .3s; }
.cart-checkout-btn:hover { background:var(--gold); color:var(--black); }

/* ── CHECKOUT MODAL ── */
.checkout-overlay { position:fixed; inset:0; z-index:3100; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s; padding:24px; }
.checkout-overlay.open { opacity:1; visibility:visible; }
.checkout-box { background:var(--white); width:100%; max-width:680px; max-height:92vh; overflow-y:auto; position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; }
@media(max-width:640px){ .checkout-box { grid-template-columns:1fr; } }
.checkout-summary-panel { background:var(--cream); padding:36px 32px; display:flex; flex-direction:column; gap:12px; }
.checkout-summary-title { font-family:var(--font-display); font-size:1.4rem; font-weight:300; margin-bottom:8px; }
.checkout-form-panel { padding:36px 32px; display:flex; flex-direction:column; gap:16px; }
.checkout-panel-title { font-family:var(--font-display); font-size:1.4rem; font-weight:300; margin-bottom:4px; }
.checkout-total-big { font-family:var(--font-display); font-size:1.8rem; font-weight:300; color:var(--rose-dark); margin-top:auto; padding-top:16px; border-top:1px solid var(--border); }
.checkout-close { position:absolute; top:16px; right:20px; background:none; border:none; cursor:none; font-size:1.2rem; color:var(--muted); }

/* ── NOTIFY MODAL ── */
.notify-overlay { position:fixed; inset:0; z-index:3200; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s; padding:24px; }
.notify-overlay.open { opacity:1; visibility:visible; }
.notify-box { background:var(--white); width:100%; max-width:420px; padding:48px 40px; text-align:center; }
.notify-icon { font-size:2.5rem; margin-bottom:16px; }
.notify-title { font-family:var(--font-display); font-size:1.8rem; font-weight:300; margin-bottom:8px; }
.notify-sub { font-family:var(--font-body); font-size:.85rem; color:var(--muted); margin-bottom:28px; line-height:1.7; }
.notify-close { position:absolute; top:16px; right:20px; background:none; border:none; cursor:none; font-size:1.2rem; color:var(--muted); }

/* ── FORMS ── */
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { font-family:var(--font-sans); font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.form-field .req { color:var(--gold); }
.form-field input, .form-field textarea, .form-field select { font-family:var(--font-body); font-size:.9rem; font-weight:300; padding:12px 0; border:none; border-bottom:1px solid var(--border); background:none; color:var(--black); outline:none; transition:border-color .3s; width:100%; cursor:none; }
.form-field input:focus, .form-field textarea:focus { border-color:var(--gold); }
.form-field textarea { resize:vertical; min-height:80px; }
.form-error { font-family:var(--font-body); font-size:.72rem; color:#c0392b; margin-top:4px; display:none; }
.form-error.show { display:block; }
.form-upload-area { border:1px dashed var(--border); padding:28px; text-align:center; cursor:none; transition:border-color .3s,background .3s; margin-bottom:20px; }
.form-upload-area:hover { border-color:var(--gold); background:rgba(184,147,90,.04); }
.form-upload-area .upload-title { font-family:var(--font-body); font-size:.88rem; font-weight:300; color:var(--muted); }
.form-upload-area .upload-link { color:var(--gold); text-decoration:underline; }
.form-upload-area .upload-sub { font-family:var(--font-body); font-size:.72rem; color:var(--muted); margin-top:6px; opacity:.6; }
.upload-preview { margin-top:10px; color:var(--gold); font-family:var(--font-body); font-size:.78rem; }
#checkout-upload-input { display:none; }
.payment-info { background:var(--cream); padding:16px 20px; margin-bottom:22px; border-left:2px solid var(--gold); }
.payment-info p { font-family:var(--font-body); font-size:.82rem; font-weight:300; color:var(--muted); line-height:1.75; }
.payment-info strong { color:var(--black); }
.form-submit { width:100%; padding:18px; background:var(--black); color:var(--white); font-family:var(--font-sans); font-size:.63rem; letter-spacing:.3em; text-transform:uppercase; border:none; cursor:none; transition:background .3s; margin-top:8px; }
.form-submit:hover { background:var(--gold); color:var(--black); }
.form-success { display:none; text-align:center; padding:40px 20px; flex-direction:column; gap:14px; align-items:center; }
.form-success.show { display:flex; }
.form-success-icon { font-size:2.8rem; color:var(--gold); }
.form-success-title { font-family:var(--font-display); font-size:1.9rem; font-style:italic; }
.form-success-text { font-family:var(--font-body); font-size:.85rem; font-weight:300; color:var(--muted); line-height:1.78; max-width:320px; }
.delivery-method-row { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.delivery-method-row label { flex:1; min-width:140px; display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer; border:1px solid var(--border); transition:border-color .25s; }
.delivery-method-row label.active-delivery { border-color:var(--gold); }
.delivery-method-row label span { font-family:var(--font-sans); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.delivery-method-row input[type="radio"] { accent-color:var(--gold); cursor:pointer; flex-shrink:0; width:auto; }

/* ── TOAST ── */
.toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--black); color:var(--white); padding:16px 28px; font-family:var(--font-body); font-size:.82rem; font-weight:300; z-index:5000; opacity:0; transition:all .4s ease; border-left:2px solid var(--gold); pointer-events:none; white-space:nowrap; }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ── KEYFRAMES ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes rotateSlow { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes scrollPulse { 0%,100%{transform:scaleY(1);opacity:.6} 50%{transform:scaleY(.5);opacity:.15} }

/* ── TRACK ORDER ── */
.track-section { min-height:80vh; display:flex; align-items:center; justify-content:center; padding:120px 24px; background:var(--cream); }
.track-box { max-width:560px; width:100%; }
.track-result { margin-top:32px; padding:28px; background:var(--white); border-left:2px solid var(--gold); }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  #story,#contact{grid-template-columns:1fr;padding:80px 48px;gap:56px;}
  #about{grid-template-columns:1fr;}.about-visual{min-height:320px;}.about-text{padding:72px 48px;}
  #features .features-inner{grid-template-columns:1fr;}
  .features-right{display:none;}
  #features,#testimonials,#how-to-order{padding:80px 48px;}
  .collections-cards{grid-template-columns:1fr;}.collection-card{aspect-ratio:4/5;}
  #collections-preview{padding:80px 48px;}
}
@media(max-width:768px){
  #navbar{padding:0 24px;}.nav-links{display:none;}.nav-hamburger{display:flex;}
  #story{padding:72px 24px;gap:48px;}#contact{padding:72px 24px;}.about-text{padding:56px 24px;}
  #features,#testimonials,#how-to-order,#collections-preview{padding:72px 24px;}
  .collections-preview-header{flex-direction:column;align-items:flex-start;}
  .steps-wrap{grid-template-columns:1fr;gap:32px;}
  .hero-circle{width:min(90vw,380px)!important;height:min(90vw,380px)!important;opacity:.3;}
  .hero-title{font-size:clamp(3.2rem,12vw,5.5rem)!important;}
  .hero-title em{letter-spacing:.12em!important;}
  .cart-drawer{width:100vw!important;}
  .checkout-box{grid-template-columns:1fr!important;}
  footer{padding:56px 24px 32px;}.footer-top{grid-template-columns:1fr;gap:40px;}
  #wa-float{bottom:20px;right:20px;}
  .exit-popup-form{flex-direction:column;}
}
@media(max-width:480px){
  .products-grid{grid-template-columns:1fr 1fr;gap:1px;}
  .pcard-arrow{opacity:.55!important;}
  .product-info{padding:14px 12px 18px;}
  .product-name{font-size:1rem;}
  .hero-title{font-size:clamp(3rem,13vw,4.8rem)!important;}
  .hero-cta{flex-direction:column;align-items:center;width:100%;}
  .btn-primary,.btn-ghost{width:100%;text-align:center;justify-content:center;}
}

/* ── ORDER MODAL (collection page Buy Now) ── */
.order-modal-overlay {
  position:fixed; inset:0; background:rgba(12,11,9,.92); z-index:1100;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.order-modal-overlay.open { opacity:1; visibility:visible; }
.order-modal-box {
  background:var(--white); max-width:520px; width:100%;
  max-height:90vh; overflow-y:auto; padding:52px 48px;
  position:relative; transform:translateY(28px); transition:transform .4s;
}
.order-modal-overlay.open .order-modal-box { transform:none; }
.order-modal-close {
  position:absolute; top:20px; right:24px;
  background:none; border:none; cursor:none;
  font-size:1.3rem; color:var(--muted); transition:color .2s;
}
.order-modal-close:hover { color:var(--black); }
.order-modal-eyebrow { font-family:var(--font-sans); font-size:.56rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.order-modal-title { font-family:var(--font-display); font-size:1.9rem; font-weight:300; margin-bottom:8px; }
.order-modal-sub { font-family:var(--font-body); font-size:.82rem; color:var(--muted); font-weight:300; line-height:1.65; margin-bottom:32px; }
@media(max-width:768px){ .order-modal-box { padding:40px 28px; } }