/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
::-webkit-scrollbar{width:0;background:transparent}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Inter',sans-serif;background:#f8f4f6;color:#1a2433;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:#e6a8b7;color:#fff}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ===== VARIABLES ===== */
:root{
  --blue:#daeefa;--pink:#fcebf1;--lavender:#efe6fa;--pearl:#fdfbfb;
  --rose-gold:#c9956b;--accent:#e6a8b7;--text:#1a2433;--text-light:rgba(26,36,51,.6);
  --glass-bg:rgba(255,255,255,.28);--glass-border:rgba(255,255,255,.55);
  --serif:'Cormorant Garamond',serif;--sans:'Inter',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ===== LOADER ===== */
.loader{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,var(--pink),var(--blue));display:flex;align-items:center;justify-content:center;transition:opacity .8s var(--ease),visibility .8s}
.loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{text-align:center}
.loader-logo{font-family:var(--serif);font-size:3rem;font-weight:600;color:var(--text);letter-spacing:.15em;margin-bottom:2rem}
.loader-bar{width:200px;height:2px;background:rgba(255,255,255,.4);border-radius:2px;overflow:hidden}
.loader-fill{width:0;height:100%;background:var(--text);border-radius:2px;animation:loaderFill 2s var(--ease) forwards}
@keyframes loaderFill{to{width:100%}}

/* ===== AMBIENT BG ===== */
.ambient-bg{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(120px);animation:orbFloat 20s infinite ease-in-out alternate}
.orb-1{top:-15%;left:-10%;width:55vw;height:55vw;background:var(--pink)}
.orb-2{top:20%;right:-15%;width:50vw;height:50vw;background:var(--blue);animation-delay:-7s}
.orb-3{bottom:-20%;left:15%;width:60vw;height:60vw;background:var(--lavender);animation-delay:-14s}
@keyframes orbFloat{0%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.08)}100%{transform:translate(-25px,25px) scale(.92)}}

/* ===== PARTICLES ===== */
.particle{position:fixed;background:white;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 8px 2px rgba(255,255,255,.5);animation:particleUp linear infinite}
@keyframes particleUp{0%{transform:translateY(100vh) scale(.4);opacity:0}15%{opacity:.5}85%{opacity:.5}100%{transform:translateY(-10vh) scale(1.1);opacity:0}}

/* ===== NAVBAR ===== */
.navbar{position:fixed;top:0;left:0;width:100%;z-index:100;padding:1.2rem 0;transition:all .5s var(--ease)}
.navbar.scrolled{background:rgba(255,255,255,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);padding:.8rem 0}
.nav-container{max-width:1400px;margin:0 auto;padding:0 3rem;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;flex-direction:column;align-items:center}
.logo-text{font-family:var(--serif);font-size:1.8rem;font-weight:700;letter-spacing:.12em;color:var(--text)}
.logo-sub{font-size:.55rem;letter-spacing:.35em;color:var(--text-light);margin-top:2px}
.nav-links{display:flex;gap:2.5rem}
.nav-link{font-size:.85rem;font-weight:500;color:rgba(26,36,51,.7);transition:color .3s;position:relative}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:var(--accent);transition:width .3s var(--ease)}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-icons{display:flex;gap:1.2rem;align-items:center}
.nav-icon-btn{color:rgba(26,36,51,.7);transition:all .3s;padding:.4rem;border-radius:50%}
.nav-icon-btn:hover{color:var(--text);transform:scale(1.1)}
.cart-btn{position:relative}
.cart-badge{position:absolute;top:-.2rem;right:-.3rem;background:var(--text);color:#fff;font-size:.6rem;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* ===== PROMO BAR ===== */
.promo-bar{position:fixed;top:0;left:0;width:100%;z-index:101;background:rgba(255,255,255,.35);backdrop-filter:blur(10px);text-align:center;padding:.5rem;font-size:.7rem;letter-spacing:.12em;color:var(--text-light);display:flex;justify-content:center;gap:.5rem;align-items:center;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.promo-bar.hide{transform:translateY(-100%);opacity:0;pointer-events:none}
.promo-sep{opacity:.3;margin:0 .8rem}
.navbar{top:28px}
.navbar.scrolled{top:0}

/* ===== GLASS BUTTONS ===== */
.glass-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 2rem;border-radius:50px;font-size:.85rem;font-weight:500;position:relative;overflow:hidden;transition:all .4s var(--ease)}
.glass-btn.primary{background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.25));backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);color:var(--text);box-shadow:0 4px 20px rgba(0,0,0,.04)}
.glass-btn.secondary{background:transparent;border:1px solid rgba(26,36,51,.15);color:var(--text)}
.glass-btn.primary.light{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.5));color:var(--text)}
.glass-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .6s ease}
.glass-btn:hover::before{left:100%}
.glass-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.08)}
.glass-btn:active{transform:translateY(0) scale(.98)}
.glass-btn svg{transition:transform .3s var(--ease)}
.glass-btn:hover svg{transform:translateX(4px)}

/* ===== HERO ===== */
.hero{position:relative;height:100vh;display:flex;align-items:center;padding-top:6rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg-img{width:100%;height:100%;object-fit:cover}
.hero-content{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:0 3rem;display:flex;align-items:center;gap:2rem;width:100%}
.hero-left{flex:1;padding-right:2rem}
.hero-right{flex:1;display:flex;justify-content:center;align-items:center;position:relative;min-height:500px}

.hero-badge{display:inline-flex;align-items:center;gap:.8rem;margin-bottom:1.8rem}
.badge-line{width:40px;height:1.5px;background:var(--accent)}
.badge-text{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--accent)}

.hero-title{font-family:var(--serif);font-size:clamp(3rem,6vw,5.5rem);line-height:1.08;color:var(--text);margin-bottom:1.5rem}
.title-line{display:block;overflow:hidden}
.title-word{display:block;transform:translateY(110%);opacity:0}

.hero-desc{font-size:1.05rem;color:var(--text-light);line-height:1.7;max-width:420px;margin-bottom:2rem;opacity:0;transform:translateY(20px)}
.hero-btns{display:flex;gap:1rem;margin-bottom:3rem;opacity:0;transform:translateY(20px)}

.hero-features{display:inline-flex;gap:2rem;background:var(--glass-bg);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:1.5rem;padding:1.2rem 2rem;opacity:0;transform:translateY(20px)}
.feature-card{display:flex;align-items:center;gap:.8rem;color:var(--text)}
.feature-card svg{flex-shrink:0;color:rgba(26,36,51,.7)}
.feature-card div{display:flex;flex-direction:column}
.feature-card strong{font-size:.8rem;font-weight:600}
.feature-card small{font-size:.65rem;color:var(--text-light)}

/* Bottle */
.bottle-container{position:relative;width:720px;height:840px;z-index:2}
.bottle-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:85%;height:85%;background:radial-gradient(circle,rgba(255,220,240,.4),rgba(200,230,255,.2),transparent 70%);border-radius:50%;filter:blur(50px)}
.hero-bottle{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) rotate(12deg);width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 25px 60px rgba(180,120,160,.18));z-index:2}
.hero-flowers{display:none}

/* Cloud overlay behind bottle for depth */
.hero-right{position:relative;overflow:visible}
.cloud-overlay-behind{position:absolute;top:14%;left:-10%;width:155%;height:auto;z-index:1;pointer-events:none;transform:scale(2.2);transform-origin:75% 75%}
.cloud-overlay-front{position:absolute;bottom:0%;left:0%;width:140%;height:auto;z-index:3;pointer-events:none;transform:scale(1.8);transform-origin:60% 80%}

/* Scroll Indicator */
.scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:.5;color:var(--text);animation:scrollBounce 2s infinite;z-index:10}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--text),transparent)}
@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* ===== PINK FOG ANIMATION SYSTEM ===== */
.fog-system{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.fog-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.fog-strip{
  position:absolute;
  width:200%;
  height:100%;
  will-change:transform;
  background-repeat:no-repeat;
  background-size:100% 100%;
}

/* --- LAYER 1: Background Haze (slowest, largest, softest) --- */
.fog-back{opacity:.3}
.fog-strip-1{
  top:-10%;
  height:120%;
  background:
    radial-gradient(ellipse 70% 55% at 15% 50%, rgba(244,195,210,0.4) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 45% 60%, rgba(230,185,215,0.3) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 75% 40%, rgba(210,190,230,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 90% 55%, rgba(248,220,235,0.35) 0%, transparent 65%);
  animation: fogDrift1 35s linear infinite, fogUndulate1 12s ease-in-out infinite;
}
.fog-strip-1b{
  top:-10%;
  height:120%;
  left:100%;
  background:
    radial-gradient(ellipse 70% 55% at 15% 50%, rgba(244,195,210,0.4) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 45% 60%, rgba(230,185,215,0.3) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 75% 40%, rgba(210,190,230,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 90% 55%, rgba(248,220,235,0.35) 0%, transparent 65%);
  animation: fogDrift1 35s linear infinite, fogUndulate1 12s ease-in-out infinite;
}

/* --- LAYER 2: Mid Atmospheric Fog (main pink movement) --- */
.fog-mid{opacity:.38}
.fog-strip-2{
  top:5%;
  height:90%;
  background:
    radial-gradient(ellipse 55% 50% at 20% 55%, rgba(240,175,200,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 65% 45% at 50% 45%, rgba(255,200,220,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 55% at 80% 50%, rgba(225,180,210,0.4) 0%, transparent 60%);
  animation: fogDrift2 25s linear infinite, fogUndulate2 9s ease-in-out infinite, fogBreathe 8s ease-in-out infinite;
}
.fog-strip-2b{
  top:5%;
  height:90%;
  left:100%;
  background:
    radial-gradient(ellipse 55% 50% at 20% 55%, rgba(240,175,200,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 65% 45% at 50% 45%, rgba(255,200,220,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 55% at 80% 50%, rgba(225,180,210,0.4) 0%, transparent 60%);
  animation: fogDrift2 25s linear infinite, fogUndulate2 9s ease-in-out infinite, fogBreathe 8s ease-in-out infinite alternate;
}

/* --- LAYER 3: Foreground Mist Accents (fastest, dreamiest) --- */
.fog-front{opacity:.22}
.fog-strip-3{
  top:15%;
  height:70%;
  background:
    radial-gradient(ellipse 45% 40% at 25% 50%, rgba(255,215,230,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 65% 55%, rgba(245,190,215,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 85% 45%, rgba(255,230,240,0.35) 0%, transparent 55%);
  animation: fogDrift3 18s linear infinite, fogUndulate3 7s ease-in-out infinite, fogBreathe 6s ease-in-out infinite;
  filter: blur(2px);
}
.fog-strip-3b{
  top:15%;
  height:70%;
  left:100%;
  background:
    radial-gradient(ellipse 45% 40% at 25% 50%, rgba(255,215,230,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 65% 55%, rgba(245,190,215,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 85% 45%, rgba(255,230,240,0.35) 0%, transparent 55%);
  animation: fogDrift3 18s linear infinite, fogUndulate3 7s ease-in-out infinite, fogBreathe 6s ease-in-out infinite alternate;
  filter: blur(2px);
}

/* --- Seamless Right→Left Drift Keyframes --- */
@keyframes fogDrift1{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes fogDrift2{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes fogDrift3{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* --- Vertical Undulation --- */
@keyframes fogUndulate1{
  0%,100%{margin-top:0}
  50%{margin-top:15px}
}
@keyframes fogUndulate2{
  0%,100%{margin-top:0}
  33%{margin-top:-12px}
  66%{margin-top:10px}
}
@keyframes fogUndulate3{
  0%,100%{margin-top:0}
  50%{margin-top:-8px}
}

/* --- Opacity Breathing --- */
@keyframes fogBreathe{
  0%,100%{opacity:1}
  50%{opacity:0.7}
}

/* --- Mobile Fog (lighter, fewer layers) --- */
.fog-mobile{z-index:1}
.fog-mobile .fog-front{display:none}
.fog-mobile .fog-back{opacity:.2}
.fog-mobile .fog-mid{opacity:.25}

@media(max-width:768px){
  .fog-system:not(.fog-mobile){display:none}
  .fog-mobile .fog-strip-1,
  .fog-mobile .fog-strip-1b{animation-duration:40s}
  .fog-mobile .fog-strip-2,
  .fog-mobile .fog-strip-2b{animation-duration:30s}
}

/* ===== BUBBLE ECOSYSTEM ===== */
.bubble-layer{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.hero-bubble{position:absolute;will-change:transform,opacity;pointer-events:none;border-radius:50%}
.hero-bubble img{width:100%;height:100%;object-fit:contain;pointer-events:none}

/* ===== SECTION COMMONS ===== */
.section-header{text-align:center;margin-bottom:4rem}
.section-tag{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:1rem}
.section-title{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.5rem);color:var(--text);line-height:1.15}
.section-title.left{text-align:left}
.section-desc{font-size:1rem;color:var(--text-light);margin-top:.8rem;max-width:500px;margin-left:auto;margin-right:auto}

/* ===== MANIFESTO ===== */
.manifesto{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:6rem 2rem}
.manifesto-text{font-family:var(--serif);font-size:clamp(3rem,10vw,9rem);line-height:1;text-align:center;color:var(--text)}
.m-line{display:block;opacity:0;transform:translateY(60px);filter:blur(10px)}
.m-line.italic{font-style:italic;font-weight:300}

/* ===== ARRIVALS ===== */
.arrivals{padding:8rem 3rem 8rem 5rem;max-width:1400px;margin:0 auto}
.products-grid{display:flex;gap:2rem;overflow-x:auto;padding-bottom:2rem;padding-left:1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.products-grid::-webkit-scrollbar{display:none}
.product-card{flex-shrink:0;width:280px;opacity:0;transform:translateY(40px);transition:transform .5s var(--ease)}
.product-card:hover{transform:translateY(-8px)!important}
.product-img-wrap{position:relative;background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:1.5rem;padding:0;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);border-radius:0}
.product-card:hover .product-img{transform:scale(1.08)}
.product-badge{position:absolute;top:1rem;left:1rem;font-size:.6rem;font-weight:700;letter-spacing:.1em;background:var(--text);color:#fff;padding:.3rem .8rem;border-radius:50px;z-index:2}
.product-badge.bestseller{background:var(--accent)}
.quick-add{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid var(--glass-border);padding:.6rem 1.5rem;border-radius:50px;font-size:.75rem;font-weight:600;transition:all .4s var(--ease);white-space:nowrap}
.product-card:hover .quick-add{opacity:1;transform:translateX(-50%) translateY(0)}
.product-info{padding:1.2rem .5rem;text-align:center}
.product-info h3{font-family:var(--serif);font-size:1.2rem;font-weight:600;margin-bottom:.3rem}
.product-info p{font-size:.75rem;color:var(--text-light)}
.product-price{font-weight:600;font-size:1rem;margin-top:.5rem;display:block}

/* ===== CATEGORIES ===== */
.categories{padding:6rem 3rem;max-width:1400px;margin:0 auto}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.category-card{position:relative;border-radius:1.5rem;overflow:hidden;aspect-ratio:3/4;cursor:pointer;opacity:0;transform:translateY(40px)}
.category-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.category-card:hover img{transform:scale(1.08)}
.category-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem;color:#fff}
.category-overlay h3{font-family:var(--serif);font-size:1.6rem;font-weight:600}
.cat-link{font-size:.8rem;margin-top:.5rem;opacity:.7;transition:opacity .3s}
.category-card:hover .cat-link{opacity:1}

/* ===== BRAND STORY ===== */
.brand-story{padding:8rem 3rem;overflow:hidden}
.story-container{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:5rem}
.story-image{flex:1;border-radius:2rem;overflow:hidden;opacity:0;transform:translateX(-60px)}
.story-image img{width:100%;height:500px;object-fit:cover;transition:transform .8s var(--ease)}
.story-image:hover img{transform:scale(1.03)}
.story-content{flex:1;opacity:0;transform:translateX(60px)}
.story-content .section-tag{margin-bottom:1rem}
.story-content .section-title{margin-bottom:2rem}
.story-content p{font-size:.95rem;color:var(--text-light);line-height:1.8;margin-bottom:1.2rem}
.story-content .glass-btn{margin-top:1rem}

/* ===== CURVED STRIP LOOP ===== */
.curved-strip-section{position:relative;overflow:hidden;transform:rotate(-8deg);width:115%;margin-left:-7.5%;margin-top:-1rem;margin-bottom:-1rem}
.strip-band{background:linear-gradient(90deg,#d4a0d9,#c89dd6,#e8b4d8,#c89dd6,#d4a0d9);padding:1.4rem 0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 95%,transparent 100%)}
.strip-track{display:flex;width:max-content;animation:stripScroll 20s linear infinite;will-change:transform}
.strip-item{font-family:var(--sans);font-size:clamp(1.4rem,3vw,2.4rem);font-weight:800;color:#fff;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;padding:0 1.5rem;text-shadow:0 2px 8px rgba(180,100,200,.25)}
.curved-strip-section:hover .strip-track{animation-play-state:paused}
@keyframes stripScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== COLLECTION ===== */
.collection{padding:4rem 3rem 3rem;text-align:center}
.collection .section-header{margin-bottom:2rem}
.collection-showcase{max-width:1000px;margin:0 auto}
.collection-img{width:100%;max-height:55vh;object-fit:cover;border-radius:2rem;box-shadow:0 30px 80px rgba(0,0,0,.08);opacity:0;transform:scale(.92)}

/* ===== SCENT NOTES ===== */
.scent-notes{padding:8rem 3rem;overflow:hidden}
.notes-container{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:5rem}
.notes-content{flex:1;opacity:0;transform:translateX(-60px)}
.notes-content .section-title{margin-bottom:2.5rem}
.notes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.note-item{background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:1.2rem;padding:1.5rem;transition:transform .4s var(--ease)}
.note-item:hover{transform:translateY(-4px)}
.note-circle{font-size:1.8rem;margin-bottom:.6rem}
.note-item h4{font-family:var(--serif);font-size:1.1rem;font-weight:600;margin-bottom:.2rem}
.note-item p{font-size:.75rem;color:var(--text-light)}
.notes-image{flex:1;border-radius:2.5rem;overflow:hidden;opacity:0;transform:translateX(60px);background:#1a1410}
.notes-image img{width:100%;height:auto;object-fit:contain;border-radius:2.5rem;display:block}

/* ===== TESTIMONIALS ===== */
.testimonials{padding:6rem 3rem}
.testimonial-track{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.testimonial-card{background:var(--glass-bg);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:1.5rem;padding:2.5rem;opacity:0;transform:translateY(40px);transition:transform .4s var(--ease)}
.testimonial-card:hover{transform:translateY(-6px)!important}
.stars{color:#f0b547;font-size:1rem;letter-spacing:2px;margin-bottom:1rem}
.testimonial-card p{font-size:.9rem;color:var(--text-light);line-height:1.7;font-style:italic;margin-bottom:1.5rem}
.testimonial-author{display:flex;align-items:center;gap:.8rem}
.author-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--blue));display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--text)}
.testimonial-author strong{font-size:.85rem;display:block}
.testimonial-author small{font-size:.7rem;color:var(--text-light)}

/* ===== PROMO ===== */
.promo-section{padding:6rem 3rem}
.promo-content{max-width:1000px;margin:0 auto;background:linear-gradient(135deg,#1a2433,#2a3a50);border-radius:2rem;padding:5rem;text-align:center;color:#fff;position:relative;overflow:hidden;opacity:0;transform:translateY(40px)}
.promo-content::before{content:'';position:absolute;top:-50%;right:-30%;width:80%;height:200%;background:radial-gradient(circle,rgba(230,168,183,.15),transparent 60%);pointer-events:none}
.promo-tag{font-size:.7rem;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:1rem}
.promo-content h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);line-height:1.2;margin-bottom:1rem}
.promo-content p{font-size:1rem;opacity:.7;margin-bottom:2rem}
.promo-content strong{color:var(--accent)}

/* ===== FOOTER ===== */
.site-footer{padding:5rem 3rem 2rem;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border-top:1px solid var(--glass-border)}
.footer-top{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:3rem;margin-bottom:3rem}
.brand-col p{font-size:.85rem;color:var(--text-light);line-height:1.7;margin-top:1rem;max-width:280px}
.social-links{display:flex;gap:1rem;margin-top:1.5rem}
.social-links a{color:var(--text-light);transition:color .3s}
.social-links a:hover{color:var(--accent)}
.footer-col h4{font-size:.8rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1.2rem}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.8rem}
.footer-col a{font-size:.85rem;color:var(--text-light);transition:color .3s}
.footer-col a:hover{color:var(--accent)}
.footer-col>p{font-size:.8rem;color:var(--text-light);line-height:1.6;margin-bottom:1rem}
.newsletter-form{display:flex;position:relative}
.newsletter-form input{width:100%;padding:.8rem 1.5rem;border-radius:50px;border:1px solid var(--glass-border);background:rgba(255,255,255,.5);font-size:.8rem;outline:none;font-family:var(--sans);transition:border .3s}
.newsletter-form input:focus{border-color:var(--accent)}
.nl-btn{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);background:var(--text);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s}
.nl-btn:hover{background:var(--accent)}
.footer-bottom{max-width:1400px;margin:0 auto;padding-top:2rem;border-top:1px solid rgba(26,36,51,.08);text-align:center}
.footer-bottom p{font-size:.75rem;color:var(--text-light)}
.footer-logo{display:flex;flex-direction:column}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hero-content{flex-direction:column-reverse;text-align:center;padding:0 2rem}
  .hero-left{padding:0;display:flex;flex-direction:column;align-items:center}
  .hero-right{min-height:350px}
  .bottle-container{width:280px;height:380px}
  .hero-features{flex-direction:column;gap:1rem;padding:1.5rem}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .story-container,.notes-container{flex-direction:column;gap:3rem}
  .story-image,.notes-image{width:100%}
  .footer-top{grid-template-columns:repeat(2,1fr)}
  .testimonial-track{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media(max-width:640px){
  .nav-container{padding:0 1.5rem}
  .hero{padding-top:5rem}
  .hero-content{padding:0 1.2rem}
  .category-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .promo-content{padding:3rem 2rem}
}

/* ========================================================================= */
/* ===== MOBILE SPECIFIC REDESIGN (UNDER 768PX) ===== */
/* ========================================================================= */
.mobile-view { display: none; }

@media (max-width: 768px) {
    /* Hide desktop versions */
    .promo-bar.desktop-view,
    .navbar.desktop-view,
    .hero.desktop-view,
    .categories.desktop-view,
    .promo-section.desktop-view {
        display: none !important;
    }

    /* Show mobile versions */
    .mobile-view { display: block; }
    
    /* Promo Bar */
    .mobile-promo-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(10px);
        padding: 0.6rem;
        font-size: 0.65rem;
        color: var(--text-light);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 101;
    }
    .mobile-promo-bar .promo-sep { opacity: 0.3; }
    
    /* Navbar */
    .mobile-navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        padding: 0.8rem 1rem;
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        transition: all 0.3s;
    }
    .mobile-navbar.scrolled {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(20px);
        padding: 0.5rem 1rem;
        top: 0;
        border-bottom: 1px solid var(--glass-border);
    }
    .mobile-nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobile-navbar .logo-text { font-size: 1.4rem; }
    .mobile-navbar .logo-sub { font-size: 0.45rem; letter-spacing: 0.2em; }
    .mobile-navbar .nav-icon-btn { padding: 0.2rem; }
    .mobile-navbar .nav-icon-btn svg { width: 17px; height: 17px; }
    .mobile-navbar .cart-badge { width: 14px; height: 14px; font-size: 0.55rem; }
    
    .m-nav-shop-link {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-right: 0.3rem;
        transition: color 0.3s;
    }
    .m-nav-shop-link:hover {
        color: var(--accent);
    }
    
    /* Hero */
    .mobile-hero {
        position: relative;
        padding-top: 5.5rem;
        padding-bottom: 3rem;
        overflow: hidden;
    }
    .m-hero-bg {
        position: absolute;
        inset: 0;
        background: url('assets/cloud-bg.png') center/cover no-repeat;
        opacity: 0.8;
        z-index: 0;
    }
    .m-hero-content {
        position: relative;
        z-index: 2;
        padding: 0 1.5rem;
        display: flex;
        align-items: center;
    }
    .m-hero-left {
        width: 53%;
        position: relative;
        z-index: 3;
    }
    .m-hero-right {
        width: 47%;
        position: absolute;
        right: 0;
        height: 100%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .m-hero-badge {
        font-size: 0.55rem;
        letter-spacing: 0.15em;
        color: #e6a8b7;
        margin-bottom: 0.8rem;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        font-weight: 600;
    }
    .m-hero-badge::before {
        content: '';
        display: inline-block;
        width: 25px;
        height: 1.5px;
        background: #e6a8b7;
        margin-right: 8px;
    }
    .m-hero-title {
        font-family: var(--serif);
        font-size: 2.2rem;
        line-height: 1.05;
        color: var(--text);
        margin-bottom: 1rem;
    }
    .m-hero-desc {
        font-size: 0.75rem;
        color: rgba(26, 36, 51, 0.7);
        line-height: 1.5;
        margin-bottom: 1.5rem;
        max-width: 95%;
    }
    .m-hero-btns {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        margin-bottom: 2rem;
    }
    .m-hero-btns .glass-btn {
        width: auto;
        justify-content: center;
        padding: 0.5rem 1rem;
        font-size: 0.7rem;
    }
    .m-benefit-card {
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 1rem;
        padding: 0.8rem 0.5rem;
        display: flex;
        justify-content: space-between;
        box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    }
    .m-benefit-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.4rem;
        flex: 1;
    }
    .m-benefit-item:not(:last-child) {
        border-right: 1px solid rgba(255,255,255,0.4);
    }
    .m-benefit-item svg {
        color: rgba(26, 36, 51, 0.6);
    }
    .m-benefit-text strong {
        font-size: 0.6rem;
        display: block;
        color: var(--text);
        margin-bottom: 2px;
    }
    .m-benefit-text span {
        font-size: 0.5rem;
        color: var(--text-light);
        display: block;
    }
    .m-hero-bottle {
        width: 140%;
        max-width: none;
        object-fit: contain;
        transform: rotate(5deg) translateY(-5%) translateX(15%);
        filter: drop-shadow(0 20px 40px rgba(180,120,160,0.2));
    }
    .m-cloud-back {
        position: absolute;
        top: 10%;
        left: -30%;
        width: 180%;
        z-index: -1;
        opacity: 0.8;
    }
    .m-cloud-front {
        position: absolute;
        bottom: -5%;
        left: -20%;
        width: 140%;
        z-index: 1;
        opacity: 0.9;
    }

    
    /* Categories */
    .mobile-categories {
        padding: 4rem 1.5rem;
    }
    .m-cat-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
    }
    .m-cat-title {
        font-family: var(--serif);
        font-size: 1.8rem;
        color: var(--text);
        line-height: 1;
    }
    .m-cat-view-all {
        font-size: 0.8rem;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 0.3rem;
        opacity: 0.8;
    }
    .m-cat-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .m-cat-card {
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 1rem;
        overflow: hidden;
        padding: 0.6rem;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    }
    .m-cat-card img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 0.8rem;
    }
    .m-cat-info {
        padding: 0.8rem 0.5rem 0.3rem;
        font-size: 0.85rem;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--text);
    }
    .m-cat-arrow {
        background: rgba(255, 255, 255, 0.6);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        border: 1px solid rgba(255,255,255,0.8);
    }
    
    /* Promo Banner */
    .mobile-promo {
        padding: 0 1.5rem 4rem;
    }
    .m-promo-content {
        background: linear-gradient(135deg, rgba(230,242,252,0.8), rgba(255,255,255,0.5));
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 1.5rem;
        padding: 2rem 1.5rem;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0,0,0,0.04);
    }
    .m-promo-text {
        position: relative;
        z-index: 2;
        width: 65%;
    }
    .m-promo-tag {
        color: #e6a8b7;
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        margin-bottom: 0.5rem;
        display: block;
        font-weight: 500;
    }
    .m-promo-text h2 {
        font-family: var(--serif);
        font-size: 1.5rem;
        line-height: 1.2;
        color: var(--text);
        margin-bottom: 0.5rem;
    }
    .m-promo-text p {
        font-size: 0.75rem;
        color: var(--text-light);
        margin-bottom: 1rem;
    }
    .m-promo-btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.8rem;
    }
    .m-promo-img {
        position: absolute;
        right: -25%;
        bottom: -20%;
        width: 70%;
        z-index: 1;
        opacity: 0.9;
        pointer-events: none;
    }
    
    /* Adjust spacing for standard sections on mobile */
    .manifesto {
        min-height: auto;
        padding: 4rem 1.5rem;
    }
    .arrivals {
        padding: 2rem 0 4rem;
        max-width: 100%;
        overflow: visible;
    }
    .arrivals .section-header {
        padding: 0 1.5rem;
    }
    .products-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        gap: 1rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .product-card {
        flex-shrink: 0 !important;
        width: 220px !important;
        min-width: 220px !important;
        scroll-snap-align: start;
    }
}

/* ========================================================================= */
/* ===== ANTI-COPY PROTECTIVE OVERLAY ===== */
/* ========================================================================= */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 999999;
  
  /* Advanced Enhancements: Near-invisible noise texture for visual scraping friction */
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.008"/%3E%3C/svg%3E');
  
  /* Screenshot friction optimization */
  mix-blend-mode: overlay;
}

/* Add drag selection friction as requested */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

input, textarea {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}